Vue-loader: Scoped CSS on slot content

[yyx990803]

It could be a legitimate use case that a component wants to style slot content inserted from parent. Currently it's a bit awkward to achieve that.

Red: https://github.com/vuejs/vue/issues/2094

[rascada]

:+1:

[ealves-pt]

:+1:

[iqingting]

👍

[flyyang]

so... what's the solution for this issue

[booxood]

@flyyang I solution it to write another new style that no scoped...

[booxood]

@yyx990803 Whether to consider providing another way of generating class for scoped?

/* now */
.item[_v-3f1fec1e] {}
/* css-modules */
.item_v-3f1fec1e {}

[flyyang]

I'd like this go vue-loader.

Don't break the single file component law.

[nickspiel]

This is currently causing us massive headaches. @yyx990803 any thoughts on how this can be addressed?

[rebers]

I keep having this issue, and not only this. Another related issue is that if you generate content dynamically, the namespace tag is also not applied. Scoping of CSS could be really useful, but for the majority of components you eventually run into a wall.

[yyx990803]

This is now supported in 9.x.

[iiiron]

this is a important change that should be written into the official document

[lxmfly123]

so... what's the solution for this issue

I use /deep/ to apply style on slot content, see here.