CustomElementRegistry: whenDefined() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。
whenDefined() は CustomElementRegistry インターフェイスのメソッドで、指定した名前の要素が定義されたときに解決されるプロミス (Promise) を返します。
構文
js
whenDefined(name)
引数
name-
カスタム要素の名前。
返値
指定された名前でカスタム要素が定義された際に、カスタム要素のコンストラクターで履行されるプロミス (Promise) です。
その名前でカスタム要素がすでに定義されている場合、このプロミスは直ちに履行されます。
例外
SyntaxErrorDOMException-
指定された name が、有効なカスタム要素名ではない場合。
例
基本的な使い方
以下の例では、 whenDefined() を用いてメニューを生成するカスタム要素が定義されたタイミングを検出しています。
実際にメニューコンテンツの表示準備が完了するまでは、メニューはプレースホルダーのコンテンツを表示します。
html
<nav id="menu-container">
<div class="menu-placeholder">読み込み中…</div>
<nav-menu>
<menu-item>アイテム 1</menu-item>
<menu-item>アイテム 2</menu-item>
…
<menu-item>アイテム N</menu-item>
</nav-menu>
</nav>
js
const container = document.getElementById("menu-container");
const placeholder = container.querySelector(".menu-placeholder");
// まだ定義されていないメニューの子を取得する
const undefinedElements = container.querySelectorAll(":not(:defined)");
async function removePlaceholder() {
// 要素を固有の localName で絞り込む
const tags = new Set(
[...undefinedElements].map((button) => button.localName),
);
const promises = [...tags].map((tag) => customElements.whenDefined(tag));
// すべての子がアップグレードされるまで待つ
await Promise.all(promises);
// それからプレースホルダーを削除
container.removeChild(placeholder);
}
removePlaceholder();
仕様書
| 仕様書 |
|---|
| HTML # dom-customelementregistry-whendefined-dev |