作成可能なスタイルシート

シームレスな再利用可能なスタイル。

Jason Miller

構築可能なスタイルシートは、シャドー DOM を使用する際に再利用可能なスタイルを作成して配布する方法です。

JavaScript を使用してスタイルシートを作成することは、以前から可能でした。ただし、これまで、document.createElement('style') を使用して <style> 要素を作成し、その sheet プロパティにアクセスして、基盤となる CSSStyleSheet インスタンスへの参照を取得するプロセスが採用されてきました。この方法では、重複する CSS コードとその肥大化が発生する可能性があります。また、肥大化の有無にかかわらず、添付するとスタイルなしコンテンツのフラッシュが発生します。CSSStyleSheet インターフェースは、CSSOM と呼ばれる CSS 表現インターフェースのコレクションのルートです。スタイルシートをプログラムで操作する方法を提供し、古い方法に関連する問題を解消します。

Constructable Stylesheets を使用すると、共有 CSS スタイルを定義して準備し、それらのスタイルを複数のシャドウルートまたはドキュメントに重複なく簡単に適用できます。共有 CSSStyleSheet の更新は、それが採用されているすべてのルートに適用されます。シートが読み込まれると、スタイルシートの採用は高速かつ同期的に行われます。

Constructable Stylesheets によって設定された関連付けは、さまざまなアプリケーションに適しています。多くのコンポーネントで使用される一元化されたテーマを提供するために使用できます。テーマはコンポーネントに渡される CSSStyleSheet インスタンスで、テーマの更新はコンポーネントに自動的に伝播されます。カスケードに依存せずに、CSS カスタム プロパティの値を特定の DOM サブツリーに配布するために使用できます。ブラウザの CSS パーサーへの直接インターフェースとして使用することもできるため、DOM に挿入することなくスタイルシートを簡単にプリロードできます。

スタイルシートの構築

この目的を達成するために新しい API を導入するのではなく、Constructable StyleSheets 仕様では、CSSStyleSheet() コンストラクタを呼び出すことで、スタイルシートを命令的に作成できます。結果として得られる CSSStyleSheet オブジェクトには、Flash of Unstyled Content（FOUC）をトリガーせずにスタイルシート ルールを追加および更新する際に安全性を高める 2 つの新しいメソッドがあります。replace() メソッドと replaceSync() メソッドはどちらも、スタイルシートを CSS の文字列に置き換えます。また、replace() は Promise を返します。どちらの場合も、外部スタイルシート参照はサポートされていません。@import ルールは無視され、警告が生成されます。

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

作成されたスタイルシートの使用

Constructable StyleSheets によって導入された 2 つ目の新機能は、シャドウルートと ドキュメントで使用できる adoptedStyleSheets プロパティです。これにより、CSSStyleSheet で定義されたスタイルを特定の DOM サブツリーに明示的に適用できます。そのため、プロパティを、その要素に適用する 1 つ以上のスタイルシートの配列に設定します。

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');

// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);

すべてを組み合わせる

Constructable StyleSheets を使用すると、ウェブ デベロッパーは CSS StyleSheets を作成して DOM ツリーに適用するための明示的なソリューションを利用できるようになります。ブラウザの組み込みパーサーと読み込みセマンティクスを使用する CSS ソースの文字列から StyleSheets を読み込むための、新しい Promise ベースの API があります。最後に、StyleSheet のすべての使用箇所にスタイルシートの更新を適用するメカニズムがあり、テーマの変更や色の設定などが簡素化されます。

デモを見る

今後の対応

Constructable Stylesheets の初期バージョンには、ここで説明する API が含まれていましたが、使いやすさを向上させるための作業が進行中です。adoptedStyleSheets FrozenArray を拡張して、スタイルシートの挿入と削除専用のメソッドを追加する提案があります。これにより、配列の複製が不要になり、スタイルシートの参照が重複する可能性を回避できます。

詳細

• Chrome プラットフォームのステータス
• 例
• API
• 解説
• 実装の目的
• 発送の意向
• Discourse