自定義元素（custom element）：即由 Web 開發(fā)人員定義行為的 HTML 元素，擴(kuò)展了瀏覽器中可用的元素集。
分類
分為兩種：
自定義內(nèi)置元素
繼承至原有的 HTML 元素，例如 HTMLImageElement 或 HTMLParagraphElement。
使用原有元素并加上 is 屬性來使用，例：
<p is="custom-paragraph-element"></p>
編寫
構(gòu)造函數(shù)
class customElement extends HTMLElement { contructor() { super(); // super() 的返回值是對當(dāng)前元素的引用 // self = super(); } }
有一些注意事項：
-
無參數(shù)的 super() 必須是構(gòu)造函數(shù)中第一個語句。
-
構(gòu)造函數(shù)內(nèi)部的 return 語句必須非常小心使用，除非它是一個簡單的提前返回（例如 return 或 return this）。否則，不能在構(gòu)造函數(shù)中出現(xiàn) return 語句。
-
通常應(yīng)盡可能將工作推遲到 connectedCallback 中，特別是涉及獲取資源或渲染的工作。
然而，請注意，connectedCallback 可能會被調(diào)用多次，因此，任何真正只需要執(zhí)行一次的初始化工作都需要有一個防護(hù)機(jī)制，以防止它被執(zhí)行多次。
-
一般而言，構(gòu)造函數(shù)應(yīng)該用于設(shè)置初始狀態(tài)和默認(rèn)值，并設(shè)置事件監(jiān)聽器以及可能的陰影根（shadow root）。
生命周期回調(diào)
-
connectedCallback：當(dāng)自定義元素第一次被連接到文檔 DOM 時被調(diào)用。
-
disconnectedCallback：當(dāng)自定義元素與文檔 DOM 斷開連接時被調(diào)用。
-
adoptedCallback：當(dāng)自定義元素被移動到新文檔時被調(diào)用。
-
attributeChangedCallback：當(dāng)自定義元素的一個屬性被增加、移除或更改時被調(diào)用。
響應(yīng)屬性變化
類中可以定義一個名為 observedAttributes 的靜態(tài)屬性，里面存放需要變更通知的屬性名。
然后使用生命周期中的 attributeChangedCallback 來監(jiān)聽屬性變化，該回調(diào)接受三個參數(shù)：
- 發(fā)生變化的屬性名（需在 observedAttributes 中定義）
- 舊的值
- 新的值
要注意：屬性被首次解析時也會觸發(fā) attributeChangedCallback！類似于 Vue 的 Watch 中的 immediate 配置。
注冊
使用 CustomElementRegistry.define() 函數(shù)。
CustomElementRegistery（自定義元素登記表）是一個接口，可以注冊、獲取、更新自定義組件。要獲取它的實(shí)例可以使用 window.customElements。
define 的三個參數(shù)分別是：
-
name (required): 組件名稱
-
constructor (required): 自定義元素構(gòu)造器
-
options：控制元素如何定義，目前只有一項：
- extends：指定繼承哪個已有元素。當(dāng)自定義內(nèi)置元素時必填，否則會報錯。
refer
MDN - CustomElementRegistry.define()
暫無評論，快來評論吧!