Scoped custom element registries
`CustomElementRegistry()` コンストラクターは、スコープ付きの用途のために新しい `CustomElementRegistry` オブジェクトを作成します。
このコンストラクターは、カスタム要素の定義を要素や `ShadowRoot` のような特定のスコープに制限する、スコープ付きレジストリを作成するために特に使用されます。
注: `Window` に関連付けられたグローバルな `CustomElementRegistry` オブジェクトは、このコンストラクターを使用して作成されるわけではありません。それは `window` がセットアップされるときに自動的に作成され、`window.customElements` プロパティを介してアクセスできます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 146 | 146 | | 26 | 146 | 26 | |
| DOM API | ||||||
| CustomElementRegistry インターフェイスの initialize() メソッドは、このレジストリを DOM サブツリーに関連付け、まだレジストリを持っていない包括的な子孫の Element.customElementRegistry を設定し、見つかったカスタム要素をアップグレードしようとします。 | 146 | 146 | | 26 | 146 | 26 |
| Document インターフェイスの customElementRegistry 読み取り専用プロパティは、このドキュメントに関連付けられた CustomElementRegistry オブジェクトを返します。 | 146 | 146 | 150 | 26 | 146 | 26 |
| Element インターフェイスの customElementRegistry 読み取り専用プロパティは、この要素に関連付けられた CustomElementRegistry オブジェクトを返します。 | 146 | 146 | 150 | 26 | 146 | 26 |
| HTMLTemplateElement インターフェイスの shadowRootCustomElementRegistry プロパティは、関連する要素の shadowrootcustomelementregistry 属性の値を反映します。 | 146 | 146 | | 26 | 146 | 26 |
| ShadowRoot インターフェイスの customElementRegistry 読み取り専用プロパティは、このシャドウ・ルートに関連付けられた CustomElementRegistry オブジェクトを返します。 | 146 | 146 | 150 | 26 | 146 | 26 |
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
基本構文
const registry = new CustomElementRegistry();
registry.define('my-el', MyElement);
const shadow = host.attachShadow({
mode: 'open',
registry
});ライブデモ
Scoped registry idea
Show how a local custom element registry can avoid global name collisions.
Why it matters
Scoped registries help larger component ecosystems avoid global coordination for every tag name.
Adoption trade-off
Use scoped registries only when your component model actually benefits from local registration boundaries.
実務での使いどころ
-
Scoped custom element registries の活用
`CustomElementRegistry()` コンストラクターは、スコープ付きの用途のために新しい `CustomElementRegistry` オブジェクトを作成します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。