Intent to Prototype: Constructable Stylesheet Objects

[Erik Nordin]

Summary: <https://en.wikipedia.org/wiki/Elevator_pitch>Many web components
use the functionality of Shadow DOM
<https://w3c.github.io/webcomponents/spec/shadow/>. Currently, In order for
a stylesheet to take effect in a Shadow DOM, it must be specified using an
HTML <style> or <link> element within each shadow root
<https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot>.
Constructable Stylesheet Objects (CSO) provides an API to create reusable
stylesheet objects directly from script. This provides a convenient means
to create stylesheet references without being tied to a DOM node. CSOs can
then be adopted by, and shared by any number of shadow roots.

Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1520690

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

Discussion: https://github.com/mozilla/standards-positions/issues/103

Platform Coverage: All platforms

Preference: Feature flagged until release:
layout.css.constructable-stylesheets.enabled

DevTools Bug: TBD what, if anything, is needed.

Other browsers:

-

Chrome: Shipped since version 73
-

Safari: Not implemented yet.
Discussed design concerns that we will address before shipping the
feature:
-

https://github.com/WICG/construct-stylesheets/issues/45
-


https://github.com/mozilla/standards-positions/issues/103#issuecomment-494181931

Web-platform-tests:
https://wpt.fyi/results/css/cssom/CSSStyleSheet-constructable.html

Secure Contexts: Enabled for both secure and insecure contexts.

Sandboxed iframes: This feature will be enabled by default in sandboxed
iframes.

[Brian Grinstead]

I’m happy to hear this - we have an interest in using this feature in the browser chrome.

We usually load chrome://global/skin/global.css as a link in the Shadow DOM for our chrome Custom Elements and rely on sync stylesheet loading from the (chrome-only) prototype cache, but would like to stop relying on this as it has led to bugs like Bug 1590280 (see https://bugzilla.mozilla.org/show_bug.cgi?id=1590280#c27 for more details).

Thanks,
Brian

> _______________________________________________
> dev-platform mailing list
> dev-pl...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-platform

[rcal...@mozilla.com]

>
> DevTools Bug: TBD what, if anything, is needed.
>

In principle, if Constructable Stylesheets are included in the same APIs used to get and listen to regular stylesheets, DevTools should support them out-of-the box.

An overview of the continued API support to handle stylesheets in DevTools, as well as a way to track whether Constructable Stylesheets are supported by DevTools: https://bugzilla.mozilla.org/show_bug.cgi?id=1602535


The bug is explicitly about support in the Inspector, but the Style Editor uses the same APIs.