HTML DOM customElements define()用法及代码示例

的customElements define()方法用于定义新的自定义元素。可以创建两种类型的定制元素：

自治的自定义元素：这些元素不继承自内置 HTML元素。
自定义的内置元素：这些元素继承自内置 HTML元素。

用法:

customElements.define( name, constructor, options );

参数：

name:它指定新的自定义元素的名称。自定义元素的名称必须包含连字符。
constructor:它为新的自定义元素指定构造函数。
options:它指定控制如何定义元素的对象。它是一个可选参数。

返回值：此方法返回void。

例：在此示例中，使用此方法定义了名为<gfg-custom-element>的自定义元素，并使用名为CustomEl的构造函数。

HTML

<!DOCTYPE HTML> 
<html> 
  
<body style="text-align:center;"> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <p> 
        HTML | customElements define() method 
    </p> 
  
    <button onclick="Geeks();"> 
        click here 
    </button> 
  
    <p id="arr"></p> 
  
    <script> 
        var arr = 
            document.getElementById("arr"); 
  
        // Function to define the element 
        function Geeks() { 
            class CustomEl extends HTMLElement { 
                constructor() { 
                    super(); 
                    this.attachShadow({ mode:'open' }); 
                    this.shadowRoot.innerHTML = ` 
            <h1 style="color:green;">   
            GeeksforGeeks Custom 
            Element Data 
                </h1> 
            `; 
                } 
            } 
  
            // Use the define() method to define 
            // a new element 
            window.customElements.define( 
                'gfg-custom-element', CustomEl); 
        }  
    </script> 
    <gfg-custom-element></gfg-custom-element> 
</body> 
  
</html>

输出：

单击按钮之前：
单击按钮后：

支持的浏览器：

谷歌浏览器66.0
边79.0
Firefox 63.0
Safari 10.1
Opera 53.0

相关用法

注：本文由纯净天空筛选整理自taran910大神的英文原创作品 HTML DOM customElements define() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。