<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://github.com/lusarz/scoped-css-inheritance-issue">https://github.com/lusarz/scoped-css-inheritance-issue</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Create generic component (<a href="https://github.com/lusarz/scoped-css-inheritance-issue/blob/master/src/components/VPanel.vue">VPanel</a>) with slot, and <code class="notranslate">.title</code> class</li>
<li>Use VPanel as root of specific component (<a href="https://github.com/lusarz/scoped-css-inheritance-issue/blob/master/src/components/VSamplePanel.vue#L2">VSamplePanel</a>)</li>
<li>Define <a href="https://github.com/lusarz/scoped-css-inheritance-issue/blob/master/src/components/VSamplePanel.vue#L4">div with class <code class="notranslate">.title</code></a> inside specific component<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/10059264/63599104-2b75a100-c5c1-11e9-9a87-71baa564a119.png"><img src="https://user-images.githubusercontent.com/10059264/63599104-2b75a100-c5c1-11e9-9a87-71baa564a119.png" alt="repro" style="max-width: 100%;"></a></li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Div with class <code class="notranslate">.title</code> created inside VSamplePanel shouldn't inherit styling from VPanel (font-size in provided example)</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Div with class <code class="notranslate">.title</code> inside VSamplePanel inherits styling from VPanel (font-size: 48px).</p>
<hr>
<p dir="auto">I need to create some generic components like card, panel etc in project. I don't want to care about name of classes used in these generic components when writing it's instances.</p>
<p dir="auto">I know you can access transition hooks by:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Vue.transition('fade', {
  beforeEnter (el) {
    console.log('beforeEnter', el)
  },
  enter (el) {
    console.log('enter', el)
  },
  afterEnter (el) {
    console.log('afterEnter', el)
  },
  enterCancelled (el) {
    // handle cancellation
  },

  beforeLeave (el) {
    console.log('beforeLeave', el)
  },
  leave (el) {
    console.log('leave', el)
  },
  afterLeave (el) {
    console.log('afterLeave', el)
  },
  leaveCancelled (el) {
    // handle cancellation
  }

})"><pre class="notranslate"><code class="notranslate">Vue.transition('fade', {
  beforeEnter (el) {
    console.log('beforeEnter', el)
  },
  enter (el) {
    console.log('enter', el)
  },
  afterEnter (el) {
    console.log('afterEnter', el)
  },
  enterCancelled (el) {
    // handle cancellation
  },

  beforeLeave (el) {
    console.log('beforeLeave', el)
  },
  leave (el) {
    console.log('leave', el)
  },
  afterLeave (el) {
    console.log('afterLeave', el)
  },
  leaveCancelled (el) {
    // handle cancellation
  }

})
</code></pre></div>
<p dir="auto">But we use <code class="notranslate">vue-router</code> and have: <code class="notranslate">&lt;Router-view transition="fade" transition-mode="out-in"&gt;&lt;/Router-view&gt;</code></p>
<p dir="auto">What we want to do is initialise some javascript on <code class="notranslate">afterEnter</code> but only some of the pages need this. I could set up a 2nd transition with hooks <code class="notranslate">Vue.transition('fadeWithInit', {...})</code> but this means i need to duplicate my CSS and all the functionality from the other <code class="notranslate">Vue.transition('fade', {...})</code> as well.</p>
<p dir="auto">It would be nice if we could access the hooks in a component level like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;script&gt;
  export default {
    data () {
      return {...}
    },

    transition: {
      'fade': {
        afterEnter () {
          ...initialise javascript here and inherit all the other hooks
        }
      }
    }
  }

&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;script&gt;
  export default {
    data () {
      return {...}
    },

    transition: {
      'fade': {
        afterEnter () {
          ...initialise javascript here and inherit all the other hooks
        }
      }
    }
  }

&lt;/script&gt;
</code></pre></div>