How do CSS modules interact with Web Components?

[MeoMix]

Hey,

One of the main benefits of using CSS modules is the automatic namespacing of selectors which allows developers to worry less about selectors colliding unintentionally.

Web Components have been gaining a great deal of traction lately. They allow for burying CSS within the Shadow DOM. The Shadow DOM also provides the ability to encapsulate CSS such that collisions are less likely to occur.

I'm wondering if these two concepts are mutually exclusive or if they can/should be mixed into each other?

[douglasduteil]

Even if the goal can be consider equal, the means is totally different. I don't develop pure Web Components using the Shadow DOM (yet), but in my opinion, it is fare to be incompatible or exclusive.

• The Shadow DOM is already a standard that is been implemented in various browsers. Its CSS encapsulation is local by default and the way to mess with it is through CSS properties, mixins or pseudo-element (Ref https://www.polymer-project.org/1.0/docs/devguide/styling.html).
• The ICSS today is clearly a post processor to achieve isolation, molecularity, autoprefixing and constants usage through your CSS. The exported classes are strongly typed, yet, they can be reuse through your code in different locations.

I think they are a lot of things to try between them. However today I feel like ICSS gives me more flexibility that just Shadow DON. Specially in development because it gives me :

• A local working environment with multiple files. And it forces me to embrace composition.
• Always autoprefixed properties (with nothing to grunt, gulp or w/e
• DOM link order agnostic development. The file order is guessed by the sources I type directly
• An extendable CSS environment in JS through PostCSS and a lot of plugins available (with good perf in top of it)

So you might compare ICSS with SCSS or LESS but not Shadow DOM because even if the goal can be consider equal, the means is totally different and the use is likely to be complementary.