-
Notifications
You must be signed in to change notification settings - Fork 907
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
When using scoped CSS, element in slot within transition element doesn't apply child scope #820
Comments
I have a similar issue |
@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. |
I might have a related issue, although i am not quite sure and can't reliably reproduce it. In my case when i have a situation like <template lang="html">
<wrapper-component>
<!-- ... -->
<div v-if="bar" slot="header" class="foo">
<span class="bar">{{ bar }}</span>
</div>
<!-- ... -->
</wrapper-component>
</template> And assuming scope data attributes called With scoped styling for With an added template tag as a workaround like this: <template lang="html">
<wrapper-component>
<!-- ... -->
<div slot="header" class="foo">
<template v-if="bar">
<span class="bar">{{ bar }}</span>
</template>
</div>
<!-- ... -->
</wrapper-component>
</template> It works just fine since Unfortunately i can't seem to reproduce it properly.
|
Just ran into this issue myself. Currently using the |
hehehe yw @mobilehobo |
Hi guys, I'm from the future 😄 and I have the same issue, but in my case the v-if is on the slot itself within the wrapper-component. |
I believe I've hit this same issue today. The scoped styles in the parent's slot stopped working when I removed an unrelated component from the child template. I can't make sense out of it. I did have a |
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
// parentComponent.vue
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.
The text was updated successfully, but these errors were encountered: