Web

Web Components でスタイルシートを再利用する

投稿日:2020年3月31日 更新日:

1. Constructable Stylesheet Objects とは?

Constructable Stylesheet Objects とは、Shadow DOMを使用するときに再利用可能なスタイルを作成および配布するための新しい仕様です。

Shadow DOM にスタイルシートを含むカスタム要素があり、このカスタム要素を複数個使う場合を考えます。この場合、それぞれのカスタム要素の中でスタイルシートが別々にパース処理されますが、全く同じスタイルシートを何度もパース処理するのは非効率です。ということで、これを1回で済ませることができるための仕様が Constructable Stylesheet Objects になります。

Constructable Stylesheet Objects という名前の仕様ですが、具体的には ShadowRoot に追加されたプロパティや CSSStyleSheet に追加されたメソッドを指します。

仕様:Constructable Stylesheet Objects

2. Constructable Stylesheet Objects の使い方

Constructable Stylesheet Objects の利用手順を、以下の JavaScript コードで説明します。 何をやっているかについてはコメントを参照してください。

// (1) CSSStyleSheet オブジェクトを作成する
const stylesheet = new CSSStyleSheet();

// (2) スタイルを変数にセットする
const styleText = `
:host {
 ... 
}`;

// (3) カスタム要素を定義する
class MyElement extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: 'open' });
    // (1)で用意した CSSStyleSheet オブジェクトを配列としてセットする
    shadow.adoptedStyleSheets = [stylesheet];

  }

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

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

このカスタムタグを複数回使った場合でも、上記のスタイルシートは1回しかパース処理されないで済みます。

この中に出てくる「adoptedStyleSheets()」や「replaceSync()」といったメソッドが、Constructable Stylesheet Objects という仕様で追加されたメソッドです。

3. デモ

本記事と同じような内容ですが、実際に Constructable Stylesheet Objects を使ったページを用意しました。

4. おわりに

Shadow DOM にセットするスタイルが大規模になるのであれば、便利な機能だと思いますが、小規模なコードであれば使う必要はないかもしれません。

また、この仕様は現時点(2020年3月)で「実験的な機能」という位置づけになっており、一部のブラウザでしか使えません(参考:DocumentOrShadowRoot API: adoptedStyleSheets | Can I use…)。

5. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Chrome

Chrome の「ピクチャー イン ピクチャー」機能を使って、YouTube の動画を最前面で再生する

目次1. Chrome の「ピクチャー イン ピクチャー」機能2. ピクチャー イン ピクチャーを行う方法3. プレイヤーの操作など3. おわりに 1. Chrome の「ピクチャー イン ピクチャー …

Web

cron-job.org を利用して特定のURLに定期的にアクセスさせる

cron-job.org というサービスの利用手順について説明します。

Glitch

ブラウザだけで完結するウェブアプリ作成環境 Glitch

ブラウザだけで完結するウェブアプリ作成環境 Glitch を紹介します。

Web

.htaccess ファイルにはWebアクセスできないようになっている

.htaccess ファイルにはWebアクセスできないようになっているという話です。

Google

【Google】アカウント無効化管理ツールの設定

Google の「アカウント無効化管理ツール」について説明します。