Document: adoptedStyleSheets プロパティ

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

adoptedStyleSheetsDocument インターフェイスのプロパティで、この文書で使用する構築されたスタイルシートの配列を設定するために使用します。

メモ: 構築されたスタイルシートとは、CSSStyleSheet() コンストラクターを用いてプログラムで作成されたスタイルシートのことです(ユーザーエージェントがスクリプトからスタイルシートをインポートしたり、<style>@import を使用してインポートしたり、<link> でリンクしたりする場合に作成されるスタイルシートとは異なります)。

このスタイルシートは、ShadowRoot.adoptedStyleSheets プロパティを使用して、1 つ以上の ShadowRoot インスタンスと共有することもできます。 このスタイルシートを変更すると、それを採用しているすべてのオブジェクトに影響します。

プロパティ内のスタイルシートは、CSS カスケードアルゴリズムを使用して、文書の他のスタイルシートと共に評価されます。 ルールの解決がスタイルシートの順序を考慮する場合、adoptedStyleSheetsDocument.styleSheets 内のスタイルシートの後に並べられると想定されます。

現在の Document のコンテキスト内で CSSStyleSheet() コンストラクターを使用して作成されたスタイルシートのみが採用されます。

値は CSSStyleSheet インスタンスの配列す。これらは同じ CSSStyleSheet() のコンテキスト内で Document コンストラクターを使用して作成されている必要があります。

配列を変更する必要がある場合は、push() のようなその場での変更を使用 してください。また、CSSStyleSheet インスタンス自体も変更することができ、この変更はこのスタイルシートが採用されている場所であればどこでも適用されます。

以前のバージョンの仕様では、配列は変更することができなかったため、新しいスタイルシートを追加する唯一の方法は adoptedStyleSheets に新しい配列を割り当てることでした。

例外

NotAllowedError DOMException

配列内の CSSStyleSheet インスタンスのいずれかが CSSStyleSheet() コンストラクターを使用して作成されていないか、フレーム内など現在の文書とは異なる文書で作成されています。

スタイルシートの採用

下記コードはスタイルシートが作成され、CSSStyleSheet.replaceSync() が呼び出されてルールが追加される様子を示しています。 このスタイルシートは配列に追加され、adoptedStyleSheets プロパティに割り当てられています。

js
// 空の「構築された」スタイルシートの作成
const sheet = new CSSStyleSheet();
// シートにルールを適用
sheet.replaceSync("a { color: red; }");

// 文書へスタイルシートを適用
document.adoptedStyleSheets = [sheet];

CSSStyleSheet.insertRule() を用いて新しいルールをスタイルシートに追加することができます。

js
sheet.insertRule("* { background-color: blue; }");
// 文書は青い背景になる。

新しいスタイルシートの追加

adoptedStyleSheets プロパティに全く新しいスタイルシートを追加するには、新しい結合配列を作成して割り当てる必要があります。 下記はスプレッド構文を使用しています。

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

// 既存のシートと新しいシートの結合
document.adoptedStyleSheets = [...document.adoptedStyleSheets, extraSheet];

シャドウ DOM とのスタイルシートの共有

このスタイルシートは、同様の方法でシャドウルートと共有することができます。

js
// 文書内の要素を作成し、シャドウルートを作成
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });

// 同じシートをシャドウ DOM に採用
shadow.adoptedStyleSheets = [sheet];

仕様書

Specification
CSS Object Model (CSSOM)
# dom-documentorshadowroot-adoptedstylesheets

ブラウザーの互換性

BCD tables only load in the browser

関連情報