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.

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

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

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

プロパティ内のスタイルシートは、CSS カスケードアルゴリズムを使用して、文書の他のスタイルシートと共に評価されます。 ルールの解決がスタイルシートの順序を考慮する場合、adoptedStyleSheets は Document.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

関連情報