CustomElementRegistry.define()

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.

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Edge No support No
Notes
No support No
Notes
Notes In Development
Firefox Full support 63
Full support 63
No support 59 — 65
Disabled
Disabled From version 59 until version 65 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 53
Notes
Full support 53
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 41
Notes
Notes Support for 'Autonomous custom elements' only.
Safari Full support 10.1
Notes
Full support 10.1
Notes
Notes Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Chrome Android Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Edge Mobile No support No
Notes
No support No
Notes
Notes In Development
Firefox Android Full support 63
Full support 63
No support 59 — 65
Disabled
Disabled From version 59 until version 65 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 53
Notes
Full support 53
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 41
Notes
Notes Support for 'Autonomous custom elements' only.
Safari iOS Full support 10.1
Notes
Full support 10.1
Notes
Notes Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android Full support 6.0
Notes
Full support 6.0
Notes
Notes Support for 'Autonomous custom elements' only.

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.

文档标签和贡献者

此页面的贡献者: zhangchen, SphinxKnight, fsx950223
最后编辑者: zhangchen,