The prior specification for adoptedStyleSheets used a FrozenArray backing array. The spec was recently changed, so that the backing array is an ObservableArray. This makes the API easier to use and understand, since it is a true mutable JS array object. For example, normal array operations such as adoptedStyleSheets.push(sheet) can be used.

Motivation

The previous FrozenArray implementation of adoptedStyleSheets was quite unwieldy. For example, to add a sheet, the entire array must be re-assigned: document.adoptedStyleSheets = [...adoptedStyleSheets, newSheet]; With the new ObservableArray type, normal JS array mutations can be used instead: document.adoptedStyleSheets.push(newSheet); As specified and implemented, this change should be backwards compatible with the previous FrozenArray implementation. It will be an observable change, however.

Specification

Specification link


Final published standard: Recommendation, Living Standard, Candidate Recommendation, or similar final form

Status in Chromium

Blink


Enabled by default (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Comments

Because few compat risks are anticipated, and because it is relatively difficult to switch the representation (FrozenArray to ObservableArray) via a feature flag, this feature will be enabled by default. This will be done at the start of a new Chromium milestone (M99), and bugs will be monitored carefully in case any breakages are observed.

Search tags

adoptedStyleSheets, ObservableArray,

Last updated on 2022-01-22