Scoped style and slotted elements

[mysticatea]

I have questions about <style scoped>, <slot> and ::slotted pseudo-element selectors.

• Does not Vue.js support CSS scoping spec?
• If so, does Vue.js have a plan to support CSS scoping spec?

---

For example to explain: gist@de98f89c48e16dea2230d13925d3b3e2.

I expected a blue box to exist inside of a red box because the CSS rule slot::slotted { } should apply to distributed elements.
But actually, a red box existed inside of another red box bacause CSS rule div { } applied to distributed elements wrongly and slot::slotted { } was merely ignored.

[kazupon]

Thank you for your filling!

AFAIK, In the about slot::slotted { }, Vue.js (vue-loader) doesn't support (not implemented).
We need to implement it.
IMO, We should be supported it.

/cc @yyx990803
What do you think?

[yyx990803]

We do not support ::slotted or >>> at the moment, but yes, we should.

[FTAndy]

Issue #113 says that 'Scoped CSS on slot content' fixed in vue-loader 9.x. But I cannot find any version description about that. And I try to define scoped style on child component when slot some element to parent element, it does work. Kind of wired. @yyx990803

[yyx990803]

@FTAndy as of now slotted content is considered both part of the parent and the child so they get matched by scoped styles from both sides.

[RuneInBoots]

The double scope seems to work for unnamed slots, but named slots seem to only get the scope of the parent.

I'd expect there be no difference between named and unnamed.
Will vue support named slots to be considered part of both parent and child?

[FTAndy]

@RuneInBoots If you use multi scoped third party lib, and want to add style to child child scoped element. You could just remove 'scoped' and add specified classname to the parent element and use the classname to scoped css rules.

[RuneInBoots]

We've been looking further into it and found out previous identified issue was incorrect.

We did identify the issue we are having, and reported it here: #820

[jwahdatehagh]

This doesn't work for me on either named or unnamed slots content. Only the parent component id is attached to the slot.

[betacar]

I have a similar issue but with :after pseudo selector.

[caikan]

@FTAndy as of now slotted content is considered both part of the parent and the child so they get matched by scoped styles from both sides.

@yyx990803 If slotted content and child element have the same class, their style will conflict.

[Crazymax11]

@yyx990803 as mentioned @caikan styles will conflict if scoped parent and scoped child will have same selector in their styles and this selector will be used in slot content.
I think slotted content should be affected only by scoped parent styles, except slot root.

It's very confusing behavior.

For example we use scoped styles and this allow us to use simpler classnames. For example .submit-button instead of my-component-name__submit-button

But if I make component with .submit-button and slot, and then some parent will place .submit-button in slot too, .submit-button styles will be broken.
Current behavior breaks isolation between parent-child - parent should not know about classnames of child, but for now I should check is child component have same classname or not.

reproduce link

[JStrebeyko]

I hate to be the "hey guys any progress on this" guy, but yeah, I am this guy now.

We are trying to keep everything neat and clean with components' scoped styles (A) while inserting them into this awesome, name-slotted layout (B). Guess one still cannot have both?

[trusktr]

Is it currently possible to style distributed elements (and/or their descendants) in Vue in some way?