Constructable Stylesheets & adoptedStyleSheets

[Westbrook]

Description

Constructable Stylesheets and adoptedStyleSheets enable adding styles directly to DOM trees, e.g. document and 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.

General consensus; shipped in both Chrome and Firefox, not available in Safari

Rationale

• 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.

Specification

https://w3c.github.io/csswg-drafts/cssom-1/

Tests

Those including "constructable" in https://github.com/web-platform-tests/wpt/tree/master/css/cssom

[gsnedders]

https://wicg.github.io/construct-stylesheets/

This should be https://w3c.github.io/csswg-drafts/cssom-1/ (see WICG/construct-stylesheets#140).

[Westbrook]

Interesting.

For my understanding, "csswg-drafts" feels less official, is that just my interpretation, or does this difference actually say something about the progress of this spec at large?

[jogibear9988]

Link to Webkit Bug:

https://bugs.webkit.org/show_bug.cgi?id=228684

[jogibear9988]

Maybe this Bug also:
https://bugs.webkit.org/show_bug.cgi?id=231054

[gsnedders]

Interesting.

For my understanding, "csswg-drafts" feels less official, is that just my interpretation, or does this difference actually say something about the progress of this spec at large?

In principle the WICG is a group in which specifications are incubated, which then get moved into a working group (such as the CSS WG) which standardises them.

[josepharhar]

Here is some potentially additional description and rationale: https://w3c.github.io/webcomponents-cg/#constructable-stylesheets-adoptedstylesheets
Here is a WPT link which should hopefully give us the right tests: https://wpt.fyi/results/css/cssom?label=experimental&label=master&aligned&view=subtest&q=adopt%20or%20construct

[foolip]

In the MDN short survey on APIs & JavaScript, "Web Components (custom elements, Shadow DOM, etc.)" was the most popular choice by a fairly wide margin, selected by ~39% of survey takers.

Web Components was split into many granular proposals, and the survey results don't tell us which aspects web developers want the most, but it's fair to say that something about Web Components is important. (I'm posting this comment on each of the split proposals.)

[nairnandu]

Thank you for proposing Constructable Stylesheets & adoptedStyleSheets for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as part of the Web Components focus area. You can follow the progress of this Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.