CustomElementRegistry: whenDefined() 方法

whenDefined() 方法是 CustomElementRegistry 接口的一部分，它返回一个 Promise，该 Promise 在命名元素被定义时解析。

语法

js
whenDefined(name)

参数

name

自定义元素的名称。

返回值

一个 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() {
  const promises = [...undefinedElements].map((button) =>
    customElements.whenDefined(button.localName),
  );

  // 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

浏览器兼容性

BCD 表仅在启用了 JavaScript 的浏览器中加载。