1 files changed, 106 insertions, 0 deletions
diff --git a/files/pt-br/web/api/customelementregistry/whendefined/index.html b/files/pt-br/web/api/customelementregistry/whendefined/index.html
new file mode 100644
index 0000000000..6480557933
--- /dev/null
+++ b/files/pt-br/web/api/customelementregistry/whendefined/index.html
@@ -0,0 +1,106 @@
+---
+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&lt;CustomElementConstructor&gt;;</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">
+&lt;nav id="menu-container"&gt;
+  &lt;div class="menu-placeholder"&gt;Loading...&lt;/div&gt;
+  &lt;nav-menu&gt;
+    &lt;menu-item&gt;Item 1&lt;/menu-item&gt;
+    &lt;menu-item&gt;Item 2&lt;/menu-item&gt;
+     ...
+    &lt;menu-item&gt;Item N&lt;/menu-item&gt;
+  &lt;/nav-menu&gt;
+&lt;/nav&gt;
+</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 =&gt; 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>