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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

Digest認証の設定手順

Digest認証の設定手順について説明します。

Chrome

Chrome で複数のユーザーを使い分ける方法

目次1. Chrome のユーザー(プロフィール)について2. ユーザー(プロフィールお)毎に管理できるもの3. ユーザーのデータ(プロフィール)がある場所4. ユーザーの管理ユーザー管理ユーザー名と …

Web

未ログイン状態で Facebook を開いた時に表示されるログインウィンドウを消す

目次1. Facebook の仕様変更?2. ブックマークレットの使い方3. 仕組み4. 注意点5. おわりに 1. Facebook の仕様変更? 未ログイン状態で Facebook のページを開く …

Web

Uptime Robot を使ってウェブサイトの死活監視を行う

Uptime Robot というウェブサイトの死活監視サービスの使い方を説明します。

ICTリテラシー

無料レンタルサーバーとDokuWiki で作る自分用情報サイト

本サイトに パソコン内に自分専用の情報データベースをつくる というページがあります。詳細はリンク先を見て頂くとして、本ページではこれに関連して、「自分専用の情報サイトを作る」ためのオススメの方法につい …