CustomElementRegistry.whenDefined()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨janeiro de 2020⁩.

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.

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.

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>

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();