CustomElementRegistry
接口的define()
方法定义了一个自定义元素。
你可以创建两种类型的自定义元素:
- 自主定制元素:独立元素; 它们不会从内置HTML元素继承。
- 自定义内置元素:这些元素继承自 - 并扩展 - 内置HTML元素
语法
customElements.define(name, constructor, options);
参数
- name
- 自定义元素名.
- constructor
- 自定义元素构造器.
- options 可选
- 控制元素如何定义. 目前有一个选项支持:
extends
. 指定继承的已创建的元素. 被用于创建自定义元素.
返回值
空
示例
自主定制元素
以下代码取自我们的 popup-info-box-web-component 示例(see it live also)。
// 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);
<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.">
注意:自主自定义元素的构造函数必须扩展HTMLElement
。
自定义内置元素
The following code is taken from our word-count-web-component example (see it live also).
// 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' });
<p is="word-count"></p>
规范
Specification | Status | Comment |
---|---|---|
HTML Living Standard customElements.define() |
Living Standard | Initial definition. |
浏览器兼容
The compatibility table on 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.
Update compatibility data on GitHub
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome
Full support
66
| Edge
No support
No
| Firefox
Full support
63
| IE No support No | Opera
Full support
53
| Safari
Full support
10.1
| WebView Android
Full support
66
| Chrome Android
Full support
66
| Edge Mobile
No support
No
| Firefox Android
Full support
63
| Opera Android
Full support
53
| Safari iOS
Full support
10.1
| Samsung Internet Android
Full support
6.0
|
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.