Declarative CSS Modules and Declarative Shadow DOM adoptedstylesheets attribute

[KurtCattiSchmidt]

WebKittens

No response

Title of the proposal

Declarative CSS Modules and Declarative Shadow DOM adoptedstylesheets attribute

URL to the spec

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

URL to the spec's repository

No response

Issue Tracker URL

No response

Explainer URL

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

TAG Design Review URL

TODO

Mozilla standards-positions issue URL

mozilla/standards-positions#1081

WebKit Bugzilla URL

No response

Radar URL

No response

Description

When developing web components, web authors often encounter challenges with distributing global styles into shadow roots and sharing styles across different shadow roots. Declarative shadow DOM (DSD) enables creation of shadow DOM without JS, but adding styles to DSD requires the developer to either use JS to put a shared stylesheet into adoptedStyleSheets, or to duplicate the styles in a <style> element for each component instance.

We propose an enhancement to CSS module scripts that would allow developers to create CSS module scripts declaratively without a network request, and apply them to DSDs without the use of JS.