CustomElementRegistry.whenDefined()
当一个元素被定义时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 |
---|
HTML Standard # dom-customelementregistry-whendefined-dev |
浏览器兼容性
BCD tables only load in the browser