Scoped style and slotted elements

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.

[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

[jwahdatehagh]

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