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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
|
---
title: CustomElementRegistry.define()
slug: Web/API/CustomElementRegistry/define
tags:
- API
- CustomElementRegistry
- Web Components
- custom elements
translation_of: Web/API/CustomElementRegistry/define
---
<p>{{APIRef("CustomElementRegistry")}}</p>
<p>{{domxref("CustomElementRegistry")}}接口的<code><strong>define()</strong></code>方法定义了一个自定义元素。</p>
<p>你可以创建两种类型的自定义元素：</p>
<ul>
<li><strong>自主定制元素</strong>：独立元素; 它们不会从内置HTML元素继承。</li>
<li><strong>自定义内置元素</strong>：这些元素继承自 - 并扩展 - 内置HTML元素</li>
</ul>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">customElements.define(<em>name</em>, <em>constructor</em>, <em>options</em>);
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt>name</dt>
<dd>自定义元素名.</dd>
<dt>constructor</dt>
<dd>自定义元素构造器.</dd>
<dt>options {{optional_inline}}</dt>
<dd>控制元素如何定义. 目前有一个选项支持:
<ul>
<li><code>extends</code>. 指定继承的已创建的元素. 被用于创建自定义元素.</li>
</ul>
</dd>
</dl>
<h3 id="返回值">返回值</h3>
<p>空</p>
<h2 id="示例">示例</h2>
<h3 id="自主定制元素">自主定制元素</h3>
<p>以下代码取自我们的 <a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">popup-info-box-web-component</a> 示例(<a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">see it live also</a>)。</p>
<pre class="brush: js">// Create a class for the element
class PopUpInfo extends HTMLElement {
constructor() {
// Always call super first in constructor
super();
// Create a shadow root
var shadow = this.attachShadow({mode: 'open'});
// Create spans
var wrapper = document.createElement('span');
wrapper.setAttribute('class','wrapper');
var icon = document.createElement('span');
icon.setAttribute('class','icon');
icon.setAttribute('tabindex', 0);
var info = document.createElement('span');
info.setAttribute('class','info');
// Take attribute content and put it inside the info span
var text = this.getAttribute('text');
info.textContent = text;
// Insert icon
var imgUrl;
if(this.hasAttribute('img')) {
imgUrl = this.getAttribute('img');
} else {
imgUrl = 'img/default.png';
}
var img = document.createElement('img');
img.src = imgUrl;
icon.appendChild(img);
// Create some CSS to apply to the shadow dom
var style = document.createElement('style');
style.textContent = '.wrapper {' +
'position: relative;' +
'}' +
'.info {' +
'font-size: 0.8rem;' +
'width: 200px;' +
'display: inline-block;' +
'border: 1px solid black;' +
'padding: 10px;' +
'background: white;' +
'border-radius: 10px;' +
'opacity: 0;' +
'transition: 0.6s all;' +
'position: absolute;' +
'bottom: 20px;' +
'left: 10px;' +
'z-index: 3;' +
'}' +
'img {' +
'width: 1.2rem' +
'}' +
'.icon:hover + .info, .icon:focus + .info {' +
'opacity: 1;' +
'}';
// attach the created elements to the shadow dom
shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(icon);
wrapper.appendChild(info);
}
}
// Define the new element
customElements.define('popup-info', PopUpInfo);</pre>
<pre><code><popup-info img="img/alt.png" text="Your card validation code (CVC) is an extra
security feature — it is the last 3 or 4
numbers on the back of your card."></code></pre>
<div class="note">
<p><strong>注意</strong>：自主自定义元素的构造函数必须扩展{{domxref("HTMLElement")}}。</p>
</div>
<h3 id="自定义内置元素">自定义内置元素</h3>
<p>以下代码取自我们的 <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> 实例 (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">查看实例效果</a>).</p>
<pre class="brush: js">// Create a class for the element
class WordCount extends HTMLParagraphElement {
constructor() {
// Always call super first in constructor
super();
// count words in element's parent element
var wcParent = this.parentNode;
function countWords(node){
var text = node.innerText || node.textContent
return text.split(/\s+/g).length;
}
var count = 'Words: ' + countWords(wcParent);
// Create a shadow root
var shadow = this.attachShadow({mode: 'open'});
// Create text node and add word count to it
var text = document.createElement('span');
text.textContent = count;
// Append it to the shadow root
shadow.appendChild(text);
// Update count when element content changes
setInterval(function() {
var count = 'Words: ' + countWords(wcParent);
text.textContent = count;
}, 200)
}
}
// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });</pre>
<pre class="brush: html"><code><p is="word-count"></p></code>
</pre>
<h2 id="规范">规范</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#dom-customelementregistry-define", "customElements.define()")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<p>{{Compat("api.CustomElementRegistry.define")}}</p>
|
