HTML DOM customElements define() 方法

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

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

句法：

customElements.define( name, constructor, options );

参数：

• name：它指定新自定义元素的名称。自定义元素的名称必须包含连字符。
• 构造函数：它指定新的自定义元素的构造函数。
• options：它指定控制元素定义方式的对象。它是一个可选参数。

返回值：此方法返回void。

示例：在此示例中，使用此方法定义了一个名为 的自定义元素，其构造函数名为CustomEl。

HTML

  

    
        GeeksforGeeks
    
  
    
        HTML | customElements define() method
    
  
    
        click here
    
  
    
  
    
        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);
        } 
    
    

  

输出：

• 点击按钮前：

  

• 点击按钮后：

  

支持的浏览器：

• 谷歌浏览器 66.0
• 边缘 79.0
• 火狐 63.0
• Safari 10.1
• 歌剧 53.0