When using scoped CSS, element in slot within transition element doesn't apply child scope

Version

11.0.0

Reproduction link

https://github.com/RuneInBoots/vue-issue

Steps to reproduce

We tried to use scoped CSS in our components. In our application we also make use of slots.

We came across the problem that the elements in the slots were only following the parent scope. We know this because we inspected the element and saw only one data-v-[id], and because our styles weren’t applied =]

After searching we found out that our issue lied with the <transition> around our child component.

// childComponent.vue

<template lang="html">
  <!-- <transition> -->
    <section>
      <h1>Child component</h1>
      <h2>text inside child</h2>
      <p>child sets background to gold</p>
      <h2>text from parent with slot</h2>
      <slot name="foobar"></slot>
    </section>
  <!-- </transition> -->
</template>

<style lang="css" scoped>
  p {background-color: gold;}
</style>

// parentComponent.vue

<template lang="html">
  <section>
    <h1>parent component</h1>
    <h2>text inside parent</h2>
    <p>parent sets color to crimson</p>
    <child-component>
      <p slot="foobar"> text from inside parent trough slot</p>
    </child-component>
   </section>
  </section>
</template>

<script>
  import childComponent from 'components/childComponent.vue';

  export default {
    components: {childComponent}
  }
</script>

<style lang="css" scoped>
  p {color: crimson;}
</style>

What is expected?

the text “text from inside parent trough slot” should have the color crimson and background-color gold. It should follow both the parent and the child scope.

What is actually happening?

the text only get the color crimson. it doesn’t follow the CSS of the child scope.

[pezillionaire]

@RuneInBoots is absolutely correct that this is how slotted content should behave with scoped CSS. I’ve also run into this with scoped components and breaks the fundamental way CSS is supposed to work.

The “Cascading” aspect of Cascading Style Sheets dictates that styling should apply to the child of the parent element. When data/elements are slotted into the component that data/elements then become a child of the component itself. Having scoped styling should still respect the “law” of CSS in this regard.

Seemingly, the way around this now seems to be unscoped styles in the component. This then breaks with the idea of componentization. I want the styling in my component to ONLY apply to that component, otherwise I might as well just use global stylesheets (one of the things that the concept of components is supposed to “solve”)

All this said, I think this is a pretty big issue and would like to see it resolved.

[mobilehobo]

Just ran into this issue myself. Currently using the /deep/ scss selector to get around it. If there’s a better way to go about this, I’m all ears. 😄