CustomElementRegistry: CustomElementRegistry() コンストラクター

構文

new CustomElementRegistry()

引数

なし。

返値

新しい CustomElementRegistry オブジェクトです。

解説

CustomElementRegistry を new CustomElementRegistry() で構築すると、その結果として生成されるレジストリーはスコープ付きとみなされます。これは、次のことを意味します。

• define() を使用してこのレジストリーに追加されたカスタム要素の定義は、グローバルには利用できません。これらは、このレジストリーに関連付けられたノードにのみ適用されます。
• define() の extends オプション（カスタム組み込み要素を作成するためのもの）は対応していません。スコープ付きレジストリーで extends を使用しようとすると、NotSupportedError DOMException が発生します。

スコープ付きレジストリーを DOM サブツリーに関連付けるには、initialize() メソッドを使用し、これを Element.attachShadow() に渡すか、Document.createElement() メソッドの customElementRegistry オプションを使用することもできます。

例

スコープ付きカスタム要素レジストリーの作成

この例では、スコープ付きレジストリーを生成し、その上に独自の要素を定義して、そのレジストリーを Element.attachShadow() に渡しています。<my-element> を含む HTML がシャドウルートに追加されると、その要素はスコープ付きレジストリーの定義を使用してアップグレードされます。

const myRegistry = new CustomElementRegistry();

myRegistry.define(
  "my-element",
  class extends HTMLElement {
    connectedCallback() {
      this.textContent = "スコープ付きレジストリーからこんにちは!";
    }
  },
);

const host = document.createElement("div");
document.body.appendChild(host);
const shadow = host.attachShadow({
  mode: "open",
  customElementRegistry: myRegistry,
});
shadow.innerHTML = "<my-element></my-element>";

console.log(shadow.querySelector("my-element").textContent);
// "スコープ付きレジストリーからこんにちは!"

仕様書

ブラウザーの互換性

関連情報

• カスタム要素の使用
• CustomElementRegistry.initialize()
• CustomElementRegistry.define()