Constructable Stylesheet Objects (including adoptedStyleSheets)

[thescientist13]

Request for position on an emerging web specification

(Please delete inapplicable rows.)

• WebKittens who can provide input:

Information about the spec

• Spec Title: Constructable Stylesheet Objects
• Spec URL: https://wicg.github.io/construct-stylesheets/
• GitHub repository: https://github.com/WICG/construct-stylesheets
• Explainer (if not README.md in the repository): https://github.com/WICG/construct-stylesheets/blob/main/explainer.md

Design reviews and vendor positions

• Mozilla standards-positions issue: https://mozilla.github.io/standards-positions/#construct-stylesheets

Bugs tracking this feature

N / A

Anything else we need to know

From the WCCG's report to TPAC in 2021

Constructable Stylesheets and adoptedStyleSheets enable adding styles directly to shadow roots without creating new DOM elements. Because a single stylesheet object can be adopted by multiple scopes, it also allows sharing of styles that can be centrally modified.

Motivation

• There is no effective way to share styles across components while allowing them to be centrally modified.
• Creating <style> elements for each style used in each shadow root has a measurable performance overhead.
• CSS Module Scripts, another critical feature, depends on constructible stylesheets.

[rniwa]

This feature seems to have some loose ends. What happened to this issue for example?

• define behavior of @import in Cascading Style Sheet (CSS) modules

[rniwa]

We also raised a number of concerns in WICG/construct-stylesheets#45 but I don't think all of them are adequately addressed.

[karlcow]

See https://bugs.webkit.org/show_bug.cgi?id=231054
because of https://webcompat.com/issues/88587

Also https://caniuse.com/mdn-api_cssstylesheet_replacesync
https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet

[uasan]

but I don't think all of them are adequately addressed.

What solution do you expect to change in the current spec for Safari to agree to implement it?

Without a native implementation in Safari, polyfill code will be executed, which gives worse performance.
Safari clients on macOS will be forced to choose any other browser because, they don't execute polyfiles which are slow and memory intensive, I think this should be fixed.

[annevk]

As of WebKit/WebKit@5de6ac4 this is implemented and enabled by default.

Per WICG/construct-stylesheets#140 however it seems like the specification has moved and the resolution of the open issues is unclear?

It's now part of https://drafts.csswg.org/cssom/ and there's at least some trivial-but-significant issues with the feature defined in that specification such as w3c/csswg-drafts#7799. As such adding concerns: interoperability.

[uasan]

In version 156 of Safari Tech Preview, this is implemented.
But there is a lack of support for Implement CSS module scripts
I need to create a separate problem here?

[annevk]

CSS module scripts would be a separate topic and therefore issue, yes.

[rniwa]

This feature has been implemented and shipped in WebKit as of Safari 16.4