v148 · CSS · Web Components

Style Isolation Demo

CSS Module Scripts let multiple Shadow DOM components share the same CSSStyleSheet object — a single parse, zero duplication. This demo compares two approaches: CSS modules (shared reference, parsed once) versus inline <style> tags (duplicated parse, one copy per component instance). The memory chart shows the difference at scale.

Scenario

Four components — same CSSStyleSheet reference. Parsed once, shared across all shadow roots.

All four components point to the same CSSStyleSheet object. If you update the sheet's rules at runtime, all components update simultaneously — no DOM walk required.

Four components — each has its own <style> tag. CSS parsed and stored separately for each instance.

Each component has its own parsed CSSStyleDeclaration. With 200 components that's 200 stylesheet parses and 200 separate in-memory rule copies. Updating styles requires touching each component.

Simulated memory cost for N component instances. Adjust the count to see where the gap grows.

Components: 50

Estimated stylesheet memory cost

runtime adoption probe

This probe checks the real primitives a browser needs for declarative CSS module scripts, then simulates the fallback path when shadowrootadoptedstylesheets cannot be parsed natively.

Specifier list Component instances

Probe has not run yet.

/* shared-styles.css (a CSS module) */
.button { padding: 0.5rem 1rem; border: 2px solid currentColor; }
.card   { border: 2px solid var(--border); padding: 1rem; }

// Component using the CSS module declaratively:
import styles from './shared-styles.css' assert { type: 'css' };

class MyCard extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    // adoptedStyleSheets: same object as every other instance
    shadow.adoptedStyleSheets = [styles];
  }
}

// HTML declarative form (Chrome 148):
<style type="module" specifier="shared-styles">
  .button { padding: 0.5rem 1rem; }
</style>
<template shadowrootmode="open"
          shadowrootadoptedstylesheets="shared-styles">...</template>

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

runtime adoption probe

references

see also

implementation reference