What problem does this feature solve?

Right now based on RFC 0023 we lost Vue 2 behavior of scoped - passing down styles to slotted elements. I understand the need for fine grained control but this decision results in relatively polluted styles of library elements. E.g. lets say we have DataTable component. This component exposes header and cell slots. Styles for elements in these slots are switched based on attributes - sortable makes headers clickable and adds arrow, highlight highlights cell/row/column on hover etc.

All these style are expected to be deep/slotted by default. But in respect to RFC 0023 I am forced to ::v-deep(<class/element>) everything. This would be 10 v-deeps under single style not counting media queries and selectors. (There is only few non deep styles)

It would be great if we can set additional properties to <style scoped> - deep or slotted. Which would affect behavior automatically.

As bonus this would make migration to vnext much easier as we would not be forced to rewrite v2 scoped style.

What does the proposed API look like?

Automatically inject ::v-deep(<element/class>):

<style scoped deep> 
...
</style>

Automatically inject ::v-slotted(<element/class>):

<style scoped slotted> 
...
</style>

I personally think v-deep and v-slotted as attributes (with the v-) or a new attribute value (so there can only be one) like

<style scoped="deep" />
<style scoped="slotted" />

are a better fit

Yea looks nice @posva. I made pull request with this. Please let me know if you require any changes. I would like to get this feature out so we can continue with library migration.

Hi @posva @yyx990803 any chance for this to be included in 3.2?

Is there any point to keep this open @posva @yyx990803 ?