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

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

関連記事

no image

ドメインに関して気を付けること

目次TLS証明書ドメインの乗っ取り1. TLS証明書が発行されてしまうとまずい2. メールアドレスが利用されてしまう TLS証明書 証明書の期限を短くする。 ドメインの乗っ取り 1. TLS証明書が発 …

Chrome

Chrome: ツールバー上の拡張機能アイコンをメニューに移動させる方法

Chromeで、ツールバー上の拡張機能アイコンをメニューに移動させる方法について説明します。

Web

インターネット上の情報とテレビ・新聞の情報

「ワイドナ」ネタツイートを宮崎駿監督発言と紹介? (日刊スポーツ) – Yahoo!ニュース(https://headlines.yahoo.co.jp/hl?a=20170529-018 …

Web

ウェブサイトを開いたら表示される「通知の表示」を求めるポップアップについて

ウェブサイトの「通知」機能について説明してます。

ただ今、本ウェブサイトを改造しています

現在、このウェブサイトを改造しています。 今回、WordPress の「Attitude」というテーマを使ってみたのですが、評判が良いだけあって使いやすいです。デザインがすっきりしていてシンプルなのも …