Version

3.2.20

Reproduction link

codesandbox.io

Steps to reproduce

:slotted() work with <style scoped> how to make it work in css-module <style module>

What is expected?

:slotted() works well with scoped styles expected that work with module styles too

What is actually happening?

how to use :slotted() with

https://v3.vuejs.org/api/sfc-style.html#style-scoped

in vue3 documentation mentioned :slotted() with it's a question how to do slotted styles with css-module style :class="$style.red"

i think you can use <style scoped> and <style module> together. i test in vue^3.2.20 and it can work well.

yeah I know, in a component both scoped and module work

but when using the slot, for styling slotted content with :slotted() only scoped works

it seems that it can not take effect when use :slotted() in <style module>

:slotted in <style scoped> will let content of slot add data-v-xxxx-s and the corresponding css will add [data-v-xxxx-s].

but <style module> just generate the unique classname.

maybe we can generate a unique slot classname and let all of nodes in slot add this classname. and the corresponding css will transform .classname1.uniqueSlotClassname {}

it is just my guess. 😂

This question came to my mind when the slotted module was not mentioned in the vue documentation

so if I cant implement this I will add style module with parent component style module

I want to know more about whether this method can be used or not

YES - No answer can be helpful for me and others that came up with this issue