CustomElementRegistry:whenDefined() 方法
CustomElementRegistry
接口的 whenDefined()
方法返回一个在具名元素被定义时兑现的 Promise
。
语法
js
whenDefined(name)
参数
name
-
自定义元素的名称。
返回值
一个 Promise
,会在使用给定名称定义自定义元素时兑现该自定义元素的构造函数。如果已经定义了给定名称的自定义元素,则 promise 立刻兑现。
如果名称不是有效的自定义元素名,则 promise 会以 SyntaxError
DOMException
被拒绝。
示例
此示例使用 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();
规范
Specification |
---|
HTML Standard # dom-customelementregistry-whendefined-dev |
浏览器兼容性
BCD tables only load in the browser