CSSStyleSheet: CSSStyleSheet() コンストラクター

options 省略可

以下のものを持つオブジェクトです。

baseURL 省略可

スタイルシートの相対 URL の解決に用いる baseURL を格納した文字列。

media 省略可

メディアルールのリストを含む MediaList、または単一のルールを含む文字列。

disabled 省略可

論理値で、スタイルシートが無効かどうかを示します。既定で false になります。

次の例では、新しい CSSStyleSheet が "print" というメディアルールで構築されています。 コンソールで StyleSheet.media を表示すると、このプリントルールの単一の項目を持つ MediaList が返されます。

let stylesheet = new CSSStyleSheet({ media: "print" });
console.log(stylesheet.media);

次のコードは、シートを構築し、CSSStyleSheet.replaceSync() を呼び出して、シートにルールを追加する様子を表します。

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

そして、ShadowRoot を作成し、このシートオブジェクトを配列内の ShadowRoot.adoptedStyleSheets (en-US) プロパティに渡しています。

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

//シートをシャドウ DOM に導入
shadow.adoptedStyleSheets = [sheet];

配列に追加した後のスタイルシートは変更することができます。 次の例では、CSSStyleSheet.insertRule() を使用して、同じシートに新しいルールを追加しています。

sheet.insertRule("* { background-color: blue; }");
// これで、文書の背景が青色になる

同じ文書内の複数のシャドウサブツリーで同じシートを共有することができます。 それ以外の例は、ShadowRoot.adoptedStyleSheets (en-US) を参照してください。

• Constructable Stylesheets (web.dev)
• シャドウ DOM の使用
• construct-style-sheets-polyfill