Considering ShadyCSS

[equinusocio]

The web components echosystem does not use CSS modules because it does not follow the web conponents patterns. You should suggest to use ShadyCSS that is the official polymer polyfill bu webcomponents.org to simulate encapsulated css.

https://github.com/webcomponents/shadycss

[yyx990803]

I don't know why CSS modules is considered "not following the patterns", as long as it achieves style scoping. ShadyCSS adds way more overhead to solve the same problem CSS modules already solve and it is designed around how Polymer works, not Vue. In comparison, CSS modules already work in *.vue files without any additional setup or polyfills.

In the long run, neither will be needed with native Shadow DOM.

[equinusocio]

CSS modules just generate classes that work in the global scope. It is different from the shadow dom behavior. You can use css modules everywhere in the document and override components style, that is not allowed with shadow dom because there are custom properties, ::part and ::theme. Just to say that you should also suggest other methods.

Anyway, this is a good project and i’m happy to see that every framework/library are converging to web components, right now when firefox and edge are nearly to release the support 😌

[hzmsrv]

Vue not support ::slotted(.classname)
Note: To work within the Shady CSS scoping shim limitations, and to ensure consistent cross-browser behavior, add a selector to the left of the ::slotted(.classname) notation (for example, p ::slotted(.classname).