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 |
瀏覽器相容性
載入中…