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 (en-US)'s construtor quando um
custom element (en-US) torna-se definido com o nome fornecido. (Se o custom element (en-US) 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