Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
CustomElementRegistry
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.
* Some parts of this feature may have varying levels of support.
A interfaceCustomElementRegistry provê métodos para registro de elementos customizados e busca de elementos registrados. Para instancia-lo, use a propriedadewindow.customElements.
Métodos
CustomElementRegistry.define()Define um novoelemento customizado.
CustomElementRegistry.get()Retorna o construtor do nome do elemento informado, ou
undefinedcaso não tenha sido definido.CustomElementRegistry.whenDefined()Retorna um
promisevazio que é resolvido quando o elemento customizado é inserido. Se o elemento já foi definido, o retorno ja é informado.
Exemplos
O código a seguir foi pego do nossoword-count-web-component exemplo (veja em ação). Perceba que usamos o métodoCustomElementRegistry.define() para definir um elemento customizado.
// Cria uma classe para o elementoclass 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 elementocustomElements.define("word-count", WordCount, { extends: "p" });Nota:Note: The CustomElementsRegistry is available through theWindow.customElements property.
Especificações
| Specification |
|---|
| HTML # custom-elements-api |