CustomElementRegistry.whenDefined()

CustomElementRegistry インターフェイスの whenDefined() メソッドは、指定した名前のエレメントが定義されたときに解決される Promise を返します。

構文

Promise<> customElements.whenDefined(name);

引数

name
カスタムエレメントの名前。

返り値

カスタムエレメントが定義されたとき、Promiseundefined に解決します。カスタムエレメントがすでに定義済みであった場合、promise は即座に解決されます。

例外

例外 説明
SyntaxError 与えられた名前が有効なカスタムエレメントの名前出ない場合、promise は SyntaxError で reject します。

以下の例では、whenDefined() を用いてメニューを生成するカスタムエレメントが定義されたタイミングを検出しています。実際にメニューコンテンツの表示準備が完了するまでは、メニューはプレースホルダーのコンテンツを表示します。

<nav id="menu-container">
  <div class="menu-placeholder">読み込み中...</div>
  <nav-menu>
    <menu-item>Item 1</menu-item>
    <menu-item>Item 2</menu-item>
     ...
    <menu-item>Item N</menu-item>
  </nav-menu>
</nav>
const container = document.getElementById('menu-container');
const placeholder = container.querySelector('.menu-placeholder');
// まだ定義されていないメニューの子供を取得する
const undefinedElements = container.querySelectorAll(':not(:defined)');

const promises = [...undefinedElements].map(
  button => customElements.whenDefined(button.localName)
);

// すべての子供が更新されるまで待ち、
// プレースホルダーを削除する。
await Promise.all(promises);
container.removeChild(placeholder);

仕様

仕様 状態 コメント
HTML Living Standard
customElements.whenDefined() の定義
現行の標準 初期定義

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
whenDefined
実験的
Chrome 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Edge 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 ? — 59
無効
無効 Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 53
補足
完全対応 53
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 41
補足
補足 Support for 'Autonomous custom elements' only.
Safari 完全対応 10.1
補足
完全対応 10.1
補足
補足 Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Chrome Android 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 In Development
Firefox Android 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 ? — 59
無効
無効 Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 47
補足
完全対応 47
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 41
補足
補足 Support for 'Autonomous custom elements' only.
Safari iOS 完全対応 10.1
補足
完全対応 10.1
補足
補足 Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android 完全対応 6.0
補足
完全対応 6.0
補足
補足 Support for 'Autonomous custom elements' only.

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, shuuji3
最終更新者: mdnwebdocs-bot,