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