v152 · HTML / Shadow DOM

Declarative Shadow DOM 'shadowrootadoptedstylesheets'

Allows for Declarative Shadow DOM (DSD) to specify adopted stylesheets at parse time. 'shadowrootadoptedstylesheets' supports a space-separated list of specifiers that each get fetched (exactly like a JavaScript import) and added to 'adoptedStyleSheets' in specified order. Developers are encouraged to preload the stylesheets referenced via <link rel="modulepreload" as="style"> in the head to prevent late fetches.

concepts

  1. Parse-time Theme

    Inspect a declarative shadow root that requests a shared CSS module at parse time.

  2. Shared Sheet Order

    Compare ordered stylesheet specifiers across two shadow roots.

  3. Failed Sheet Fallback

    Observe the required empty-sheet/fallback behavior when a stylesheet fetch fails.

why it shipped

Declarative shadow roots can share CSS module sheets without waiting for imperative JavaScript, reducing duplication and flashes of unstyled content.

references