摘要：若自定義元素標簽名稱不可用則摒棄。總之，自定義元素讓開發者的代碼更易理解和維護，并分割為小型，可復用及可封裝的模塊。被稱為自定義元素接口，雖然現在仍然可用，但是已經被棄用并被認為是糟糕的實現。

原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。

這是 JavaScript 工作原理第十九章。

在 前述文章中，我們介紹了 Shadow DOM 接口和一些其它概念，而這些都是網頁組件的組成部分。網頁組件背后的思想即通過創建顆粒化，模塊化和可復用的元素來擴展 HTML 內置功能。這是一個已經被所有主流瀏覽器兼容的相對嶄新的 W3C 標準且可以被用在生產環境之中，雖然不兼容的瀏覽器需要使用墊片庫(將在隨后的章節中進行討論)。

正如開發者所知，瀏覽器為構建網站和網頁程序提供了一些重要的開發工具。我們所說的 HTML，CSS 和 JavaScript 即開發者使用 HTML 來構建結構，CSS 進行樣式化然后使用 JavaScript 來讓頁面動起來。然而，在網頁組件出現之前，把 JavaScript 腳本和 HTML 結構組合起來并非易事。

本文將闡述網頁組件的基石-自定義元素。總之，開發者可以使用自定義元素接口來創建包含 JavaScript 邏輯和樣式的自定義元素(正如名稱的字面意思)。許多開發者會把自定義元素和 shadow DOM 混為一談。但是，他們是完全不同的概念且它們互補而不是可以相互替代的。

一些框架(比如 Angular，React) 試圖通過引進其自有概念來解決同樣的問題。開發者可以把自定義元素和 Angular 的指令或者 React 組件進行對比。然而，自定義元素是瀏覽器原生的且只需要原生 JavaScript，HTML 和 CSS。當然了，這并不意味著它可以取代一個典型的 JavaScript 框架。現代框架不僅僅為開發者提供模仿自定義元素行為的能力。因此，可以同時使用框架和自定義元素。

在深入了解之前，讓我們先大概快速瀏覽一下接口的內容。全局 customElements 對象為開發者提供了一些方法：

define(tagName, constructor, options) －創建一個新的自定義元素。

包含三個參數：自定義元素的可用標簽名稱，自定義元素類定義及選項參數對象。目前僅支持一個選項參數：extends 指定想要擴展的 HTML 內置元素名稱的字符串。用來創建定制化內置元素。

get(tagName) －若元素已經定義則返回自定義元素的構造函數否則返回 undefined。只有一個參數：自定義元素的可用標簽名稱。

whenDefined(tagName)－返回一個 promise 對象，當定義自定義元素即解析。若元素已定義則立即進行解析。若自定義元素標簽名稱不可用則摒棄 promise。只有一個參數：自定義元素的可用標簽名稱。

創建自定義元素實際上就是小菜一碟。開發者只需要做兩件事：創建擴展 HTMLElement 類元素的類定義，然后以合適的名稱注冊元素。

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    // …
  }

  // …
}

customElements.define("my-custom-element", MyCustomElement);

或者如你所愿，可以使用匿名類以防止弄亂當前作用域

customElements.define("my-custom-element", class extends HTMLElement {
  constructor() {
    super();
    // …
  }

  // …
});

從以上例子可見，使用 customElements.define(...) 方法注冊自定義元素。

實際上，問題是啥？嵌套 DIV 是問題之一。嵌套 Div 是啥？在現代網頁程序中這是一個非常常見的現象，開發者會使用多個嵌套塊狀元素(div 互相嵌套之類)。

  

    

      

        

          

            …
          
        
      
    
  

因為瀏覽器可以在頁面上正常進行渲染，所以使用了這樣的嵌套結構。但是，這會使得 HTML 不具可讀性且難以維護。

因此，例如假設有如下組件：

那么傳統 HTML 結構類似如下：

但想象下如果可以使用類似如下代碼：

要我說，第二個示例清爽多了。第二個示例更具可維護性，可讀性且對于瀏覽器和開發者更加合理。更加簡潔。

另一個問題即可復用性。作為開發者，不僅僅要書寫可運行的代碼還得寫出可維護代碼。書寫可維護代碼即能夠輕易地復用代碼片段而不是重復地復制粘貼。

我將會給出一個簡單的示例而你就會明白。假設有如下元素：

若需要在其它地方使用這段代碼，開發者需要再次書寫相同的 HTML 結構。現在，想象 一下需要稍微修改一下這些元素。開發者需要找出每個代碼需要修改的地方，然后一遍遍地做出同樣的修改。太惡心了。。。

若使用如下碼豈不會更好？

現代網頁程序不僅僅只有靜態 HTML。開發者需要做交互。這就需要 JavaScript。一般來說，開發者需要做的即創建一些元素然后在上面監聽事件以響應用戶輸入。點擊，拖拽或者懸浮事件等等。

var myDiv = document.querySelector(".my-custom-element");

myDiv.addEventListener("click", () => {
  myDiv.innerHTML = " I have been clicked ";
});

  I have not been clicked yet.

使用自定義元素接口可以把所有的邏輯封裝進元素自身。以下代碼可以實現和上面代碼一樣的功能：

class MyCustomElement extends HTMLElement {
  constructor() {
    super();

    var self = this;

    self.addEventListener("click", () => {
      self.innerHTML = " I have been clicked ";
    });
  }
}

customElements.define("my-custom-element", MyCustomElement);

  I have not been clicked yet

咋一看上去，自定義元素技術需要書寫更多的 JavaScript 代碼。但是在實際程序中，創建不需復用的單一組件的情況是很少見的。一個典型的現代網頁程序的重要特征即大多數元素都是動態創建的。那么，開發者就需要分別處理使用 JavaScript 動態添加元素或者使用 HTML 結構中預定義內容。那么可以使用自定義元素來實現這些功能。

總之，自定義元素讓開發者的代碼更易理解和維護，并分割為小型，可復用及可封裝的模塊。

在創建自定義元素之前，開發者需要遵守如下特殊規則：

名稱必須包含一個破折號 - 。這樣 HTML 解析器就可以把自定義元素和內置元素區分開來。這樣可以保證不會和內置元素出現命名沖突的問題(不管是現在或者將來當添加其它元素的時候)。比如， 是正確的而 myCustomElement 和 則不然。

不允許重復注冊標簽名稱。重復注冊標簽名稱會導致瀏覽器拋出 DOMException 錯誤。不可以覆蓋已注冊自定義元素。

自定義元素不可以自關閉。HTML 解析器只允許一小撮內置元素可以自關閉(比如