adoptedStyleSheet property docs

[hamishwillee]

This is a follow on from #16717 adding docs for the missing properties Document.adoptedStyleSheets and ShadowRoot.adoptedStyleSheets and updating the release note.

In addition, this feature is part of "constructable stylesheets" for efficiently sharing CSS between shadow DOM sub trees. So I've updated the constructor for CSSStyleSheet to note this use and better cross link between all the related docs.
Some of this is just necessary because there is no parent "Using constructable stylesheets" doc or link we can use.

Note that there is a missing guide doc still to be written at some point. I'll create a separate PR for that.

Other docs work can be tracked in #16624

[github-actions]

Preview URLs

• https://pr16773.content.dev.mdn.mozit.cloud/en-US/docs/Mozilla/Firefox/Releases/101
• https://pr16773.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
• https://pr16773.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CSSStyleSheet/deleteRule
• https://pr16773.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CSSStyleSheet/insertRule
• https://pr16773.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CSSStyleSheet/replace
• https://pr16773.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CSSStyleSheet/replaceSync
• https://pr16773.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/Document/adoptedStyleSheets
• https://pr16773.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/Document
• https://pr16773.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets
• https://pr16773.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/ShadowRoot

Flaws

Note! 8 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/Document
Title: Document
on GitHub
Flaw count: 24

• macros:
  • /en-US/docs/Web/API/HTMLAllCollection does not exist
  • /en-US/docs/Web/API/Document/xmlStandalone does not exist
  • /en-US/docs/Web/API/Document/captureEvents does not exist
  • /en-US/docs/Web/API/Document/getBoxQuads does not exist
  • /en-US/docs/Web/API/Document/normalizeDocument does not exist
  • and 7 more flaws omitted
• bad_bcd_links:
  • no explanation!
  • no explanation!
  • no explanation!
  • no explanation!
  • no explanation!
  • and 7 more flaws omitted

---

URL: /en-US/docs/Web/API/ShadowRoot
Title: ShadowRoot
on GitHub
Flaw count: 5

• macros:
  • /en-US/docs/Web/API/ShadowRoot/getSelection does not exist
  • /en-US/docs/Web/API/ShadowRoot/elementFromPoint does not exist
  • /en-US/docs/Web/API/ShadowRoot/elementsFromPoint does not exist
• bad_bcd_links:
  • no explanation!
  • no explanation!

External URLs

URL: /en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
Title: CSSStyleSheet()
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CSSStyleSheet/replace
Title: CSSStyleSheet.replace()
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CSSStyleSheet/replaceSync
Title: CSSStyleSheet.replaceSync()
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CSSStyleSheet/deleteRule
Title: CSSStyleSheet.deleteRule()
on GitHub

• https://web.dev/constructable-stylesheets/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/CSSStyleSheet/insertRule
Title: CSSStyleSheet.insertRule()
on GitHub

• https://web.dev/constructable-stylesheets/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Document
Title: Document
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/Document/adoptedStyleSheets
Title: Document.adoptedStyleSheets
on GitHub

• https://web.dev/constructable-stylesheets/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/ShadowRoot
Title: ShadowRoot
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets
Title: ShadowRoot.adoptedStyleSheets
on GitHub

• https://web.dev/constructable-stylesheets/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Mozilla/Firefox/Releases/101
Title: Firefox 101 for developers
on GitHub

No new external URLs

(this comment was updated 2022-07-01 01:51:28.625957)

[estelle]

first half

[estelle]

Great. Never heard of this. Just a few questions.

[estelle]

as they are "later", they take precedence if selectors match, and are unlayered, so take precedence over all other styles. Is there a way to assign them to a layer?

[hamishwillee]

@estelle Good question. This comes from the very last bullet point in the explainer

• Stylesheets added to adoptedStyleSheets are part of the DocumentOrShadowRoot's style sheets, and they are ordered after theDocumentOrShadowRoot's styleSheets.
  • This means when there are conflicting rules in the adoptedStyleSheets and styleSheets and the resolution will consider the order of stylesheets, they treat the sheets in adoptedStyleSheets as ordered later.

I have more accurately captured this in suggestion: https://github.com/mdn/content/pull/16773/files#r888564793

Is there a way to assign them to a layer?

I don't know. Asked here: https://bugzilla.mozilla.org/show_bug.cgi?id=1644102#c13

AS an aside

If you search on "cascade" there are a few links other than your update topic. You might want to cross link to your updated doc (and making sure there are no glaring errors)? For example https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

[hamishwillee]

@estelle Response from developer to questions:

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

Using @layer inside the stylesheet just like in a style element.
w3c/csswg-drafts#7002 tracks adding a per-stylesheet
layer.

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?

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

---

So the only "special" thing about adopted stylesheets is that they're effective order of import into the user agent is after other stylesheets and in the order of the array. All other things like layers are as per the normal cascade rules. I think that is captured by the updated comment

[estelle]

I have a few optional comments. Approved. Learned something FTW!

[estelle]

[deleted. left comment on wrong page]

[hamishwillee]

Thanks for the review @estelle . I've incorporated the suggestions and will merge.