blob: 2ba88d94fdb08e58c78b6276f1a3eb96ad58213d (
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: Document.registerElement()
slug: Web/API/Document/registerElement
tags:
- DOM
- Document.registerElement()
- ELEMENTO DOM
- Web Components
- registerElement
translation_of: Web/API/Document/registerElement
original_slug: Web/API/Document/ElementoRegistrado
---
<p>{{APIRef("DOM")}}</p>
<div class="note">
<p><strong>Note:</strong>document.registerElement() está depreciado em favor do customElements.define().</p>
</div>
<p>O método <code><strong>document.registerElement()</strong></code> registra um novo <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">elemento personalizado</a> no browser e returna um construtor para o novo elemento.</p>
<div class="note">
<p><strong>Nota:</strong> Esta é uma tecnologia experimental. O browser você precisa usar suporte à componentes web. Veja <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Habilitando componentes web no Firefox.</a></p>
</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre>
<h3 id="Parâmetros">Parâmetros</h3>
<dl>
<dt><em>tag-name</em></dt>
<dd>O nome do elemento personalizado. O nome precisa conter um dash (-), por exemplo minha-tag.</dd>
<dt><em>Opções{{optional_inline}}</em></dt>
<dd>
<p>Um projeto com propriedades <strong>protótipo</strong> como base para o elememento personalizado, e <strong>extends</strong>, uma existente tag para estender. Ambos são opcionais.</p>
</dd>
</dl>
<h2 id="Exemplo">Exemplo</h2>
<p>Aqui é um exemplo muito simples:</p>
<pre class="brush: js">var Mytag = document.registerElement('my-tag');
</pre>
<p>Agora as novas tags são registradas no browser.</p>
<p>Uma variável Mytag tem um construtor que você pode usar para criar um elemento my-tag nos documentos como seguem:</p>
<pre class="brush: js">document.body.appendChild(new Mytag());</pre>
<p>Isto insere um elemento vazio my-tag que será visível se você usar o browser para desenvolvedores. Isto não será visível se você usar a ferramenta visão da capacidade do código fonte do browser. E isto não será visível no browser a menos que você adicione alguns conteúdos para a tag. Aqui está um caminho para adicionar conteúdo a nova tag:</p>
<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0];
mytag.textContent = "I am a my-tag element.";</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('Custom Elements')}}</td>
<td>{{Spec2('Custom Elements')}}</td>
<td>
<p>definição inicial</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>35</td>
<td>31<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>25</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>4.4.4</td>
<td>31<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>25</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Esta API é implementada uma preferência</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/Web/Web_Components/Custom_Elements">Elementos customizados</a></li>
</ul>
|
