-
Notifications
You must be signed in to change notification settings - Fork 8.1k
/
index.md
71 lines (51 loc) · 2.38 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
---
title: CustomElementRegistry
slug: Web/API/CustomElementRegistry
---
{{DefaultAPISidebar("Web Components")}}
A interface **`CustomElementRegistry`** provê métodos para registro de elementos customizados e busca de elementos registrados. Para instancia-lo, use a propriedade {{domxref("window.customElements")}}.
## Métodos
- {{domxref("CustomElementRegistry.define()")}}
- : Define um novo [elemento customizado](/pt-BR/docs/Web/Web_Components/Custom_Elements).
- {{domxref("CustomElementRegistry.get()")}}
- : Retorna o construtor do nome do elemento informado, ou `undefined` caso não tenha sido definido.
- {{domxref("CustomElementRegistry.whenDefined()")}}
- : Retorna um {{jsxref("Promise", "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](https://github.com/mdn/web-components-examples/tree/master/word-count-web-component) exemplo ([veja em ação](https://mdn.github.io/web-components-examples/word-count-web-component/)). Perceba que usamos o método {{domxref("CustomElementRegistry.define()")}} para definir um elemento customizado.
```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" });
```
> [!NOTE]
> Note: The CustomElementsRegistry is available through the {{domxref("Window.customElements")}} property.
## Especificações
{{Specifications}}
## Compatibilidade com navegadores
{{Compat}}