Peter Kröner

Somebody on LinkedIn asked for my approach to global CSS in #Webcomponents with Shadow DOM:

1. Import CSS as Strings (via Vite)
2. Shove CSS into the CSSStyleSheet Constructor
3. Add the results to the ShadowRoot's adopted stylesheets
4. Delete all of the above once Safari supports CSS module scripts

This is how you future-proof your projects: be aware of what's coming to the platform and prepare your workarounds to be easily removable when the new features arrive ✨

#webdev #javascript

Feb 16 at 9:54amWeb
Show threadBramFeb 19
Isn’t this causing a lot of overhead? Basically every component loading every global css file in their adoptedstylesheet?
Show threadPeter KrönerFeb 19
@bramsmulders The CSSStyleSheet objects are shared between the shadow roots, and the shadow roots themselves are tiny compared to an entire web page. This is as efficient as it gets, at least if you want a no-brainer "this is the default CSS library in every component"-style approach.