---
title: CustomElementRegistry
slug: Web/API/CustomElementRegistry
translation_of: Web/API/CustomElementRegistry
---
<p>{{DefaultAPISidebar("Web Components")}}</p>

<p><span class="seoSummary">A interface <strong><code>CustomElementRegistry</code></strong> provê métodos para registro de elementos customizados e busca de elementos registrados. Para instancia-lo, use a propriedade {{domxref("window.customElements")}}. </span></p>

<h2 id="Métodos">Métodos</h2>

<dl>
 <dt>{{domxref("CustomElementRegistry.define()")}}</dt>
 <dd>Define um novo <a href="/en-US/docs/Web/Web_Components/Custom_Elements">elemento customizado</a>.</dd>
 <dt>{{domxref("CustomElementRegistry.get()")}}</dt>
 <dd>Retorna o construtor do nome do elemento informado, ou <code>undefined</code> caso não tenha sido definido.</dd>
 <dt>{{domxref("CustomElementRegistry.whenDefined()")}}</dt>
 <dd>Retorna um {{jsxref("Promise", "promise")}} vazio que é resolvido quando o elemento customizado é inserido. Se o elemento já foi definido, o retorno ja é informado.</dd>
</dl>

<h2 id="Exemplos">Exemplos</h2>

<p>O código a seguir foi pego do nosso <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> exemplo (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">veja em ação</a>). Perceba que usamos o método {{domxref("CustomElementRegistry.define()")}} para definir um elemento customizado.</p>

<pre class="brush: js">// Cria uma classe para o elemento
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Sempre execute primeiro o método super
    super();

    // Conta as palavras no elemento pai
    var wcParent = this.parentNode;

    function countWords(node){
      var text = node.innerText || node.textContent
      return text.split(/\s+/g).length;
    }

    var count = 'Words: ' + countWords(wcParent);

    // Cria um shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Cria um nó de texto e adiciona o contador de palavra nele
    var text = document.createElement('span');
    text.textContent = count;

    // Acrescenta ao shadow root
    shadow.appendChild(text);


    // Atualiza o contador quando houver mudança
    setInterval(function() {
      var count = 'Words: ' + countWords(wcParent);
      text.textContent = count;
    }, 200)

  }
}

// Define um novo elemento
customElements.define('word-count', WordCount, { extends: 'p' });</pre>

<div class="note">
<p>Note: The CustomElementsRegistry is available through the {{domxref("Window.customElements")}} property.</p>
</div>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "custom-elements.html#customelementregistry", "CustomElementRegistry")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p> </p>



<p>{{Compat("api.CustomElementRegistry")}}</p>

<p> </p>