Skip to content

Commit

Permalink
Update constructable stylesheet examples (mdn#29267)
Browse files Browse the repository at this point in the history
Update index.md

Constructible stylesheets are now mutable arrays.
The spec was updated in https://www.w3.org/TR/cssom-1/#extensions-to-the-document-or-shadow-root-interface.
  • Loading branch information
ebidel authored Oct 10, 2023
1 parent 14f5ec6 commit 76a33f0
Showing 1 changed file with 6 additions and 7 deletions.
13 changes: 6 additions & 7 deletions files/en-us/web/api/shadowroot/adoptedstylesheets/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ Only stylesheets created using the [`CSSStyleSheet()` constructor](/en-US/docs/W

The value is an array of {{domxref("CSSStyleSheet()")}} instances that must have been created using the {{domxref("CSSStyleSheet.CSSStyleSheet()", "CSSStyleSheet()")}} constructor within the context of the shadow root's parent {{domxref("Document")}}.

If the array needs to be modified, then a new array must be assigned (in-place mutations like `push()` will throw an exception).
Note, however, that the {{domxref("CSSStyleSheet()")}} instances themselves can be modified, and these changes will apply wherever the stylesheet is adopted.
If the array needs to be modified, use in-place mutations like `push()`.
Note, the {{domxref("CSSStyleSheet()")}} instances themselves can also be modified, and these changes will apply wherever the stylesheet is adopted.

## Examples

Expand All @@ -47,7 +47,7 @@ We then create a {{domxref("ShadowRoot")}} and pass the sheet object to `adopted
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });

//Adopt the sheet into the shadow DOM
// Adopt the sheet into the shadow DOM
shadow.adoptedStyleSheets = [sheet];
```

Expand All @@ -61,15 +61,14 @@ sheet.insertRule("* { background-color: blue; }");

### Append a new stylesheet

To _append_ a stylesheet to the `adoptedStyleSheets` property we have to create and assign a new array that contains both the original stylesheets in the property and the new style sheet.
This is demonstrated for our shadow root object below using spread-syntax:
New stylesheets can be _appended_ to the document or shadow root by using `adoptedStyleSheets.push()`:

```js
const extraSheet = new CSSStyleSheet();
extraSheet.replaceSync("p { color: green; }");

// Combine the existing sheets and new one
shadow.adoptedStyleSheets = [...document.adoptedStyleSheets, extraSheet];
// Concat the new sheet.
shadow.adoptedStyleSheets.push(extraSheet);
```

## Specifications
Expand Down

0 comments on commit 76a33f0

Please sign in to comment.