--- title: CustomElementRegistry.whenDefined() slug: Web/API/CustomElementRegistry/whenDefined tags: - API - CustomElementRegistry - Method - Reference - Web Components - custom elements - whenDefined browser-compat: api.CustomElementRegistry.whenDefined --- <p>{{APIRef("CustomElementRegistry")}}</p> <p> O <code><strong>whenDefined()</strong></code> é um método de {{domxref("CustomElementRegistry")}} e a interface retorna uma {{jsxref("Promise")}} que é resolvido quando o elemento nomeado é definido. </p> <h2 id="Syntax">Syntax</h2> <pre class="brush: js">customElements.whenDefined(<em>name</em>): Promise<CustomElementConstructor>;</pre> <h3 id="Parameters">Parâmetros</h3> <dl> <dt>name</dt> <dd>Nome do elemento personalizado.</dd> </dl> <h3 id="Return_value">Valor de retorno</h3> <p> A {{jsxref("Promise")}} que será cumprida com o <a href="/en-US/docs/Web/API/Window/customElements">elemento personalizado</a>'s construtor quando um <a href="/en-US/docs/Web/API/Window/customElements">custom element</a> torna-se definido com o nome fornecido. (Se o <a href="/en-US/docs/Web/API/Window/customElements">custom element</a> já foi definido, a promessa devolvida será imediatamente cumprida.) </p> <h3 id="Exceptions">Exceções</h3> <table class="no-markdown"> <thead> <tr> <th scope="col">Exceção</th> <th scope="col">Descrição</th> </tr> </thead> <tbody> <tr> <td><code>SyntaxError</code></td> <td> Se o nome fornecido não for um <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">nome de elemento personalizado válido</a>, a promessa rejeita com um <code>SyntaxError</code>. </td> </tr> </tbody> </table> <h2 id="Examples">Exemplos</h2> <p> Este exemplo usa <code>whenDefined()</code> 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. </p> <pre class="brush: 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> </pre> <pre class="brush: js"> 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(); </pre> <h2 id="Specifications">Specifications</h2> {{Specifications}} <h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> <p>{{Compat}}</p>