Constructable Stylesheet Objects を試す

1. このページの目的

Constructable Stylesheet Objects を試す。

2. Constructable Stylesheet Objects とは？

構築可能なスタイルシート

Shadow DOMを使用するときに再利用可能なスタイルを作成および配布するための新しい方法

3. 使い方

以下のコードで使い方を示す。何をやっているかについてはコメントを参照

// (1) CSSStyleSheet オブジェクトを作成する
const myElementSheet = new CSSStyleSheet();
// (2) スタイルを変数にセットする
const styleText = `
:host {
  color: red;
}
`;
// (3) カスタム要素を定義する
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: "open" });
    // (1)で用意した CSSStyleSheet オブジェクトを配列としてセットする
    shadowRoot.adoptedStyleSheets = [myElementSheet];
  }

  connectedCallback() {
    // Only actually parse the stylesheet when the first instance is connected.
    // 1つ目のインスタンスが接続されたときにのみ、スタイルシートをパースさせる
    if (myElementSheet.cssRules.length == 0) {
      // (2)で用意したスタイルを(1)で用意した CSSStyleSheet オブジェクトに適用する
      myElementSheet.replaceSync(styleText);
    }
  }
}

// (4) カスタム要素をカスタムタグに紐付ける
customElements.define('my-element', MyElement);

4. デモ

カスタムタグを2つ使ってみた。

ブラウザのコンソールを見ると、connectedCallback()は2回実行されているが、replaceSync()は1回しか実行されていないのが分かる (JavaScriptのコードは my-element.js を参照)。

5. 参考