CustomElementRegistry.whenDefined()
O whenDefined()
é um método de CustomElementRegistry
e a interface retorna uma Promise
que é resolvido quando o elemento nomeado é
definido.
Syntax
customElements.whenDefined(name): Promise<CustomElementConstructor>;
Parâmetros
- name
-
Nome do elemento personalizado.
Valor de retorno
A Promise
que será cumprida com o elemento personalizado's construtor quando um
custom element torna-se definido com o nome fornecido. (Se o custom element já foi
definido, a promessa devolvida será imediatamente cumprida.)
Exceções
Exceção | Descrição |
---|---|
SyntaxError |
Se o nome fornecido não for um nome de elemento personalizado válido, a promessa rejeita com um SyntaxError . |
Exemplos
Este exemplo usa whenDefined()
para detectar quando os elementos personalizados que compõem um menu são definidos. O menu exibe o conteúdo do espaço reservado até que o conteúdo do
menu real esteja pronto para ser exibido.
<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");
// Busca todos os filhos do menu que ainda não foram definidos.
const undefinedElements = container.querySelectorAll(":not(:defined)");
async function removePlaceholder() {
const promises = [...undefinedElements].map((button) =>
customElements.whenDefined(button.localName),
);
// Espere que todos os filhos sejam atualizados
await Promise.all(promises);
// em seguida, remova o espaço reservado
container.removeChild(placeholder);
}
removePlaceholder();
Specifications
Specification |
---|
HTML Standard # dom-customelementregistry-whendefined-dev |
Compatibilidade com navegadores
BCD tables only load in the browser