CSSStyleSheet: CSSStyleSheet() コンストラクター
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.
* Some parts of this feature may have varying levels of support.
CSSStyleSheet() コンストラクターは、新しい CSSStyleSheet オブジェクトを生成します。これは、単一のスタイルシートを表します。
スタイルシートを構築した後は、CSSStyleSheet.replace()、CSSStyleSheet.replaceSync()、CSSStyleSheet.insertRule()、CSSStyleSheet.deleteRule() の各メソッドを使用して、新しいスタイルシートのルールを変更することができます。
このメソッドを使用して生成されたスタイルシートは「構築スタイルシート」(constructed stylesheet) と呼ばれます。
構築スタイルシートは、 ShadowRoot.adoptedStyleSheets および Document.adoptedStyleSheets を使用して文書やそのシャドウ DOM サブツリー間で共有することができます。
構文
new CSSStyleSheet()
new CSSStyleSheet(options)
引数
options省略可-
以下のものを持つオブジェクトです。
baseURL省略可-
スタイルシートの相対 URL の解決に用いる
baseURLを格納した文字列。 media省略可-
メディアルールのリストを含む
MediaList、または単一のルールを含む文字列。 disabled省略可-
論理値で、スタイルシートが無効かどうかを示します。既定で false になります。
例
次の例では、新しい CSSStyleSheet が "print" というメディアルールで構築されています。
コンソールで StyleSheet.media を表示すると、このプリントルールの単一の項目を持つ MediaList が返されます。
let stylesheet = new CSSStyleSheet({ media: "print" });
console.log(stylesheet.media);
スタイルシートのシャドウ DOM との共有
次のコードは、シートを構築し、CSSStyleSheet.replaceSync() を呼び出して、シートにルールを追加する様子を表します。
// 空の「構築」スタイルシートを生成
const sheet = new CSSStyleSheet();
// シートにルールを適用
sheet.replaceSync("a { color: red; }");
そして、ShadowRoot を作成し、このシートオブジェクトを配列内の ShadowRoot.adoptedStyleSheets プロパティに渡しています。
// 文書内に要素を作成し、シャドウルートを作成する
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
//シートをシャドウ DOM に導入
shadow.adoptedStyleSheets = [sheet];
配列に追加した後のスタイルシートは変更することができます。
次の例では、CSSStyleSheet.insertRule() を使用して、同じシートに新しいルールを追加しています。
sheet.insertRule("* { background-color: blue; }");
// これで、文書の背景が青色になる
同じ文書内の複数のシャドウサブツリーで同じシートを共有することができます。
それ以外の例は、ShadowRoot.adoptedStyleSheets を参照してください。
仕様書
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-cssstylesheet |