ShadowRoot: customElementRegistry プロパティ

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more browser support for this feature? Tell us why.

もっと詳しく
完全な互換性情報を見る

customElementRegistry は ShadowRoot インターフェイスの読み取り専用プロパティで、このシャドウルートに関連付けられた CustomElementRegistry オブジェクトを、設定されていない場合は null を返します。

シャドウルートの customElementRegistry は、そのシャドウツリー内の要素を、どのカスタム要素定義が使用してアップグレードするかを決定します。これは、シャドウルートが作成される際に Element.attachShadow() の customElementRegistry オプションを介して設定するか、あるいは後で CustomElementRegistry.initialize() を使用して設定することができます。一度 CustomElementRegistry オブジェクトに設定されると、変更することはできません。

このプロパティは、Document オブジェクト上でも、同時に customElementRegistry というプロパティ名を通じて利用可能です。

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.customElementRegistry === myRegistry); // true
console.log(shadow.querySelector("my-element").textContent);
// "スコープ付きレジストリーからこんにちは!"