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.
WebKittens
No response
Title of the proposal
Declarative CSS Modules and Declarative Shadow DOM
adoptedstylesheetsattributeURL 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
https://github.com/mozilla/standards-positions/issues/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.