Vue version

3be4e3c

Link to minimal reproduction

https://play.vuejs.org/#eNqVVE1v2zAM/SucLwGKOinWbYcsK7ANPXSHblgH7OKLa7O2WkUSJDofKPLfR8mJnUROsJ4s80uPj3x6Tb4aM140mEyTGeHcyJzwJlMAs1IsoJC5c1+yJDcmS4IZgBPaw+y7nhutUNFfQfWD1LSNYNe7NIV7TaJAoDonuBvNQWkCLicqJVQFuVq35YE0+GTCsisINVqENO0LHkfczCaRaQtrMoxrNuGO+DSb7PXJv66wwhA4pMaAzFXF/ZIL7QquYwmievBk9RxG4/gmT+Xoc5cZ9bVLPHbs8jy8FtAWHK0lgiu0wZItYx4EvPpulqKkegqfrq7MivOAGRNVTfuWx7x4qaxuVJkWWmo7hTVKqZfs3Pjikwu4g0eUAhd+SsLB9rZaN7JUI2In8IUcUA4O6WLCiCwazIknmoZppiqf4wHEDxHE3hJDtFi2+JgHj4abTi55HoVWT6IaPzuteFVD/SwpGIqQaH8aElrxzKbtzd6X+1Z/BBvZBi939qLG4mXA/uxW3pYlvyw6tAvMks5Hua2QWvftwz2u+Nw557psJEefcf5Gp2XjMbZh37hhhr0XF9DehaVhKv+42xWhcrumPFAfuQnxWcLL4qdwqvUe7vX4OuQxo8zi4LaeF75nOKSkS85JHSd1D4EP7ATab4UPDLuyk2MfdpARhOQYK4stjvQ3scbD51QyqjJKPanyIyENNHawtR+jre0t8dZWFlEN7O2QzM8TPiSnjvFtuZ7sN3Qc1I4rgwWx2BGetF85/xK3gSzwXu6X8NgQCBo5/2qP/1Pp7yPOekvMmRHqJaJs8w9MSTt6

Steps to reproduce

1. Create a component with slot - ComponentWithSlot.vue
2. Create another component with root element having a specific scoped class (for example repeating-class-name). Apply some scoped styles to this class. - SlottedComponent.vue
3. In yet another component apply different scoped styles to class repeating-class-name, use ComponentWithSlot and pass SlottedComponent as a slot into ComponentWithSlot. - App.vue
4. Check which styles are applied to SlottedComponents root element with class repeating-class-name.

What is expected?

SlottedComponents root element is styled with scoped styles applied to it in SlottedComponent.vue file

What is actually happening?

SlottedComponents root element is styled with scoped styles applied to it in App.vue file

System Info

No response

Any additional comments?

I see in docs https://vuejs.org/api/sfc-css-features.html#child-component-root-elements that it says:

But in this case I didn't apply the class in parent element.

Due to this issue it's easy to unintentionally apply styles defined in parent element to its slotted children root nodes.

<SlottedComponent> is in the template of App.vue. Therefore, it's receiving App's scoped style attribute, just like any normal element in App.vue - regardless of wether you put that into another component's slot, or not.

So this is working as designed - the quoted docs apply to this scenario. We may revisit this documented effect of affecting root notes in discussions next major, as we do understand it can be a footgun sometimes but so far, for now, this is not a bug and is working as intended - changing it would be a breaking change.