1644102 - (construct-stylesheets-release) Enable constructable stylesheets on all channels

Status: RESOLVED FIXED

(Core :: DOM: CSS Object Model, task, P3)

Comment 1

[Sebastian Zartner [:sebo]]

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

Comment 2

[Rachel Andrew]

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

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1644102 - Turn on constructable stylesheets by default. r=edgar

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

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b5c0bdafaf5e
Turn on constructable stylesheets by default. r=edgar,preferences-reviewers,mstriemer

Comment 6

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Failed to create upstream wpt PR due to merge conflicts. This requires fixup from a wpt sync admin.

Comment 7

[Cristian Tuns]

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

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/26c04f03e9ad
Turn on constructable stylesheets by default. r=edgar,preferences-reviewers,mstriemer

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5c227c071608
Annotate another test that inadvertently tested constructable stylesheets.

Comment 10

[Norisz Fay [:noriszfay]]

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

Comment 11

[Hamish Willee]

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?

Comment 12

[Emilio Cobos Álvarez (:emilio)]

No, those are all, thanks!

Comment 13

[Hamish Willee]

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

Comment 14

[Emilio Cobos Álvarez (:emilio)]

(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).

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/34394 for changes under testing/web-platform/tests

Comment 16

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 17

[Hamish Willee]

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.