Constructable Stylesheets and adoptedStyleSheets: One Parse, Every Shadow Root – Frontend Masters Blog

Constructable Stylesheets allow browsers to parse CSS once and share that single parsed object across every shadow root instance, instead of re-parsing a `<style>` tag per component instance. The raw API uses `new CSSStyleSheet()` with `replaceSync()`/`replace()` and `adoptedStyleSheets` to attach sheets to shadow roots or the document. Lit's `static styles` and `css` tagged template literal automate this: styles are deduplicated via a `Set` in `finalizeStyles()`, lazily instantiated on first DOM connection, and cached for all subsequent instances. The article covers shared style modules (e.g., `formControlStyles` shared across form components), DevTools inspection, live mutation propagation, global token injection, and current gaps including no SSR serialization path, no `@layer` integration, and limited bundler support for CSS Module Scripts.