A interface CustomElementRegistry
provê métodos para registro de elementos customizados e busca de elementos registrados. Para instancia-lo, use a propriedade window.customElements
.
Métodos
CustomElementRegistry.define()
- Define um novo elemento customizado.
CustomElementRegistry.get()
- Retorna o construtor do nome do elemento informado, ou
undefined
caso não tenha sido definido. CustomElementRegistry.whenDefined()
- Retorna um
promise
vazio 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 nosso word-count-web-component exemplo (veja em ação). Perceba que usamos o método CustomElementRegistry.define()
para definir um elemento customizado.
// 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' });
Note: The CustomElementsRegistry is available through the Window.customElements
property.
Especificações
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CustomElementRegistry' in that specification. |
Padrão em tempo real | Definição inicial |
Compatibilidade de navegadores
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.