CustomElementRegistry: whenDefined() 方法
CustomElementRegistry 接口的 whenDefined() 方法返回一个 Promise，该 Promise 在指定的元素被定义时解析。
语法
js
whenDefined(name)
参数
name-
自定义元素的名称。
返回值
当具有给定名称的自定义元素被定义时，返回一个 Promise，该 Promise 以自定义元素的构造函数作为值履行。如果具有该名称的自定义元素已经被定义，则该 Promise 将立即履行。
如果该名称不是有效的自定义元素名称，则 Promise 将以 SyntaxError DOMException 拒绝。
示例
此示例使用 whenDefined() 来检测构成菜单的自定义元素何时被定义。菜单在实际菜单内容准备好显示之前会显示占位符内容。
html
<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>
js
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)");
async function removePlaceholder() {
// Filter the elements down to unique localNames
const tags = new Set(
[...undefinedElements].map((button) => button.localName),
);
const promises = [...tags].map((tag) => customElements.whenDefined(tag));
// Wait for all the children to be upgraded
await Promise.all(promises);
// then remove the placeholder
container.removeChild(placeholder);
}
removePlaceholder();
规范
| 规范 |
|---|
| HTML # dom-customelementregistry-whendefined-dev |
浏览器兼容性
加载中…