blob: b1e3be4458a39a12c9df23af239de0a2a0bb2f5c (
plain)
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
---
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="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
<p> </p>
<p>{{Compat("api.CustomElementRegistry")}}</p>
<p> </p>
|
