Intent to Experiment: Declarative CSS module scripts

[Chromestatus]

Contact emails

ksc...@microsoft.com

Explainer

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

Specification

https://github.com/whatwg/html/pull/11687

Design docs

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

Summary

Declarative CSS Modules Scripts are an extension of the existing script-based CSS Module Scripts. They allow for developers to share declarative stylesheets with shadow roots, including declarative shadow roots. Developers can define inline style modules with <style type="module" specifier="foo"> and apply a declarative module to a declarative shadow DOM by referencing specifier or a URL, such as <template shadowrootmode="open" shadowrootadoptedstylesheets="foo">.

Blink component

Blink>HTML

Web Feature ID

Missing feature

TAG review

https://github.com/w3ctag/design-reviews/issues/1000. A second issue was brought up to the TAG and has been addressed by the current design: https://github.com/w3ctag/design-reviews/issues/1195

TAG review status

Issues addressed

Goals for experimentation

We would like feedback on the API shape from developers, as well as real-life performance benefits from using this API.

Risks

Interoperability and Compatibility

No information provided

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1081)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/407)

Web developers: Positive (https://github.com/WICG/webcomponents/issues/939) "Styling and Customization" is listed as the #1 pain point for Web Components in https://2023.stateofhtml.com/en-US/features/web_components/#using_web_components_pain_points, which this proposal addresses.

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Ongoing technical constraints

None

Debuggability

Applied styles are reflected in developer tools. Adopted stylesheets are reflected in the DOM. Error conditions are logged to the console.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets https://wpt.fyi/results/html/semantics/document-metadata/the-style-element/tentative

Flag name on about://flags

None yet

Finch feature name

DeclarativeCSSModules

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/448174611

Estimated milestones

Origin trial desktop first	148
Origin trial desktop last	153
Origin trial Android first	148
Origin trial Android last	153
Origin trial WebView first	148
Origin trial WebView last	153

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/4790543041298432?gate=5195795808780288

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/68dab832.050a0220.1ba43a.01ee.GAE%40google.com

This intent message was generated by Chrome Platform Status.