When constructable stylesheets are enabled, we need to make sure to document them on https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet and related pages.

Sebastian

I recently added the constructor, replace, and replaceSync methods to the docs.

All known issues have patches. Let's try this after these land.

Backed out for causing mochitest failures in test_parseStyleSheetImport.html

• Backout link
• Push with failures
• Push with failures
• Failure Log1
• Failure Log2
• Failure line: webidl/ecmascript-binding/observable-array-ownkeys.window.html | ObservableArray's ownKeys trap - expected FAIL
• Failure line: layout/inspector/tests/test_parseStyleSheetImport.html | reordering preserved suffixed style sheet - got [object CSSStyleSheet], expected [object CSSStyleSheet]
  log 3: https://treeherder.mozilla.org/logviewer?job_id=376069995&repo=autoland

https://hg.mozilla.org/mozilla-central/rev/26c04f03e9ad
https://hg.mozilla.org/mozilla-central/rev/5c227c071608

FF101 Docs work for this can be tracked in https://github.com/mdn/content/issues/16624.

We don't have enough time/experience to integrate the concepts into Using the shadow DOM so first docs for release will primarily be:

• Update compatibility data for affected methods/properties
• Add link to the web.dev explainer https://web.dev/constructable-stylesheets/
• Add release note and remove from the experimental features.

The "public API" for this feature mentioned in MDN appeared to be the CSSStyleSheet() constructor, CSSStyleSheet.replace() and CSSStyleSheet.replaceSync().

However I found that adoptedStyleSheets also appears to be affected by the preference. Are there any other methods or properties that I have missed?

No, those are all, thanks!

Thanks! Another question from discussion of the docs PR

1. Is there a way to assign constructed CSS stylesheet rules to a layer?
2. For calculating the cascade, the explainer says that if there are rules in conflict that would be resolved by order or import, then the adopted stylesheets come last. The question is, can I assume that they are treated as author origin and that that even if imported in inline javascript, they will not be considered to be inline styles? (my knowledge of cascade is from https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade ).

(In reply to Hamish Willee from comment #13)

Thanks! Another question from discussion of the docs PR

1. Is there a way to assign constructed CSS stylesheet rules to a layer?

Using @layer inside the stylesheet just like in a style element. https://github.com/w3c/csswg-drafts/issues/7002 tracks adding a per-stylesheet layer.

2. For calculating the cascade, the explainer says that if there are rules in conflict that would be resolved by order or import, then the adopted stylesheets come last. The question is, can I assume that they are treated as author origin and that that even if imported in inline javascript, they will not be considered to be inline styles? (my knowledge of cascade is from https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade ).

Hm? Not sure I follow. Yes, these are always author stylesheets. The order of the stylesheets is

• Stylesheets in the shadow tree (<link> and <style>, in tree order)
• Adopted stylesheets (in whatever order the array is).

FYI docs work for this "somewhat" complete. Essentially all the new properties are documented and so the detail work is done.

What is missing is that we really need to integrate guide material for this into the docs on shadow DOM. I've created a placeholder issue for that in https://github.com/mdn/content/issues/16774 - but I don't know when it will become a priority. In the meantime the reference docs link to the web.dev explainers.