← Back to release summary

Declarative Shadow DOM shadowrootadoptedstylesheets

Category
DOM
Type
New or changed feature
Status
Proposed (Chrome Proposed)
Intent stage
None

Summary

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">.

Motivation

Without this feature, developers have several non-ideal options for sharing a set of styles between declarative shadow DOM hosts: 1. Use imperative CSS Modules, somewhat defeating the purpose of declarative shadow DOM, because it requires script and must happen after the declarative shadow DOM has been parsed. 2. Duplicating <style> tags, resulting in more work for parser and more work for the developer to update dynamically. 3. Use external CSS files in a <link> tag, resulting in a potential Flash of Unstyled Content (FOUC), as well as more work for the developer to update dynamically.

Standards & signals

Docs: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md

Explainers: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md

View on chromestatus.com