CustomElementRegistry
インターフェイスはカスタムエレメントの登録と、登録された要素を紹介するためのメソッドを提供します。このインスタンスを取得するには、window.customElements
プロパティを使います。
メソッド
CustomElementRegistry.define()
- 新しいカスタムエレメントを定義。
CustomElementRegistry.get()
- 指定されたカスタムエレメントへのコンストラクタか、またはカスタムエレメントが定義されていない場合は
undefined
を返す。 CustomElementRegistry.whenDefined()
- 名前を与えられたカスタムエレメントが定義されたとき、空の
promise
(resolves)を返す。もしそのようなカスタムエレメントが既に定義されていた場合、返された promise は即座に fulfill状態になります。
例
以下のコードは我々の word-count-web-component という例 (こちらのライブデモを見てください) から持ってきています。メモ: クラスを生成した後カスタムエレメント定義するための CustomElementRegistry.define()
メソッドの使用方法。
// 要素のクラスを生成
class WordCount extends HTMLParagraphElement {
constructor() {
// コンストラクタ内ではまずはじめに必ず super をコールする
super();
// 親要素の要素内の count というワード
var wcParent = this.parentNode;
function countWords(node){
var text = node.innerText || node.textContent
return text.split(/\s+/g).length;
}
var count = 'Words: ' + countWords(wcParent);
// shadow root を生成
var shadow = this.attachShadow({mode: 'open'});
// テキストノードを生成し、count というワードを追加
var text = document.createElement('span');
text.textContent = count;
// shadow root に追加
shadow.appendChild(text);
// 要素のコンテンツが変化した時、count を更新
setInterval(function() {
var count = 'Words: ' + countWords(wcParent);
text.textContent = count;
}, 200)
}
}
// 新しい要素を定義
customElements.define('word-count', WordCount, { extends: 'p' });
メモ: CustomElementsRegistry は Window.customElements
プロパティを通して利用可能です。
仕様
仕様 | ステータス | コメント |
---|---|---|
HTML Living Standard CustomElementRegistry の定義 |
現行の標準 | 初期定義。 |
ブラウザ互換性
BCD tables only load in the browser