Skip to content
This repository was archived by the owner on Mar 14, 2024. It is now read-only.
This repository was archived by the owner on Mar 14, 2024. It is now read-only.

content: Constructable Stylesheets: adoptedStyleSheets.push now works #10294

@SimonSiefke

Description

@SimonSiefke

What page(s) need to be updated?

https://web.dev/constructable-stylesheets/#using-constructed-stylesheets

Why is this update needed?

From the article:

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [sheet];

Notice that we're overriding the value of adoptedStyleSheets instead of changing the array in place. This is required because the array is frozen; in-place mutations like push() throw an exception, so we have to assign a new array. To preserve any existing StyleSheets added via adoptedStyleSheets, we can use concat to create a new array that includes the existing sheets as well as additional ones to add

Since this article was created, there have been some great changes to adoptedStylesheets, specifically adoptedStyleSheets.push is now allowed and adoptedStyleSheets is not immutable anymore.

Proposed changes to the article

  • Using adoptedStyleSheets.push in the example code
  • Removing the paragraph about adoptedStyleSheets being immutable and in-place mutations not being allowed

Metadata

Metadata

Assignees

No one assigned

    Labels

    content updatefor issues that do not require new content (only for updates to existing content)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions