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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。