CustomElementRegistry.whenDefined() - Web API 接口参考 编辑

 当一个元素被定义时CustomElementRegistry 中的方法whenDefined() 接口返回  Promise.

语法

Promise<> customElements.whenDefined(name);

参数

name

自定义元素的名称

返回值

当自定义元素被定义时一个Promise 返回{jsxref("undefined")}}. 如果自定义元素已经被定义，则resolve立即执行。

例外

Exception	Description
SyntaxError	如果提供的 name 不是一个有效的 自定义元素名字, promise 的 reject 回调会接收到一个 SyntaxError.

例子

这个例子使用whenDefined() 来检测生成菜单的自定义元素何时被定义. 这个菜单显示占位符内容一直到菜单内容已经准备好显示.

<nav id="menu-container">
  <div class="menu-placeholder">Loading...</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');
// Fetch all the children of menu that are not yet defined.
const undefinedElements = container.querySelectorAll(':not(:defined)');

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

// Wait for all the children to be upgraded,
// then remove the placeholder.
await Promise.all(promises);
container.removeChild(placeholder);

规范

Specification	Status	Comment
HTML Living Standard customElements.whenDefined()	Living Standard	Initial definition.

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.