Intent to Prototype: 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

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.

Blink component

Blink>HTML

Web Feature ID

Missing feature

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). 2. Duplicating <style> tags, resulting in more work for the network and parser. 3. Use external CSS files in a <link> tag, resulting in a potential Flash of Unstyled Content (FOUC). Declarative CSS Modules avoid all of these pitfalls, allowing developers to define a base set of styles inline that declarative shadow roots can performantly share.

Initial public proposal

https://github.com/WICG/webcomponents/issues/939

TAG review

https://github.com/w3ctag/design-reviews/issues/1000

TAG review status

Pending

Risks

Interoperability and Compatibility

None

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?

None

Debuggability

This may require DevTools updates, but the design is TBD.

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

Not yet.

Flag name on about://flags

None yet

Finch feature name

None yet

Requires code in //chrome?

False

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

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

This intent message was generated by Chrome Platform Status.