Declarative CSS Modules and Declarative Shadow DOM adoptedstylesheets attribute

[KurtCattiSchmidt]

こんにちは TAG-さん!

I'm requesting an early TAG design review of Declarative CSS Modules and the Declarative Shadow DOM adoptedstylesheets attribute.

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.

• Explainer¹: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md
• User research: Included in Explainer
• Security and Privacy self-review²: This feature has no known privacy/security concerns.
• GitHub repo: https://github.com/whatwg/html/
• Primary contacts:
  • Kurt Catti-Schmidt (@KurtCattiSchmidt), Microsoft, developer
  • Tien Mai (@phumai98), Microsoft, program manager
  • Alison Maher (@alisonmaher), Microsoft, developer
  • Dan Clark (@dandclark), Microsoft, developer
• Organization/project driving the design: Web Components CG
• Multi-stakeholder feedback³:
  • Chromium comments:
  • Mozilla comments: Declarative CSS Modules and Declarative Shadow DOM adoptedstylesheets attribute mozilla/standards-positions#1081
  • WebKit comments: Declarative CSS Modules and Declarative Shadow DOM adoptedstylesheets attribute WebKit/standards-positions#407

Further details:

• I have reviewed the TAG's Web Platform Design Principles
• The group where the incubation/design work on this is being done (or is intended to be done in the future): Discussion has taken place in Web Components CG; we plan to pursue stage advancement in WHATWG
• The group where standardization of this work is intended to be done ("unknown" if not known): WHATWG
• Existing major pieces of multi-implementer review or discussion of this design: minutes from TPAC 2024 Breakout sessions: Sharing styles with Declarative Shadow DOM w3c/tpac2024-breakouts#31 (comment) and CSS Modules w3c/tpac2024-breakouts#29 (comment)
• Major unresolved issues with or opposition to this design:
• This work is being funded by: Microsoft