Web Components

原因

探討使用Web Components的原因，我們已經(jīng)知道像 Vue 和 React 這樣的成熟框架存在，但是有沒有深入思考過為什么選擇使用這些框架？核心理由無非是為了減少編碼工作量，通過框架減少代碼重復(fù)，盡管這同時(shí)引入了一些原生不支持的特性，從而增加了一定的復(fù)雜性。當(dāng)我了解到Web Components時(shí)，我開始思考是否可以用它來取代 Vue，因?yàn)?Vue 的主要優(yōu)勢(shì)之一就是能夠?qū)崿F(xiàn)組件的封裝和復(fù)用

構(gòu)成

Web Components 由三個(gè)主要部分構(gòu)成，與Vue的模板非常相似：

• 自定義元素（Custom Element）： 這是一組JavaScript API，使你能夠定義自定義元素及其行為，以便根據(jù)需要在用戶界面中使用它們
• 影子DOM（Shadow DOM）： 這也是一組JavaScript API，用于將一個(gè)封閉的“影子”DOM樹附加到元素上（與主文檔DOM分開渲染），并管理其相關(guān)功能。這樣，你可以確保元素的功能是私有的，因此它們可以被腳本化和樣式化，而不會(huì)與文檔的其他部分產(chǎn)生沖突
• HTML模板（HTML Template）： template 和 slot 元素讓你能夠創(chuàng)建不會(huì)立即顯示在渲染頁(yè)面中的標(biāo)記模板。然后，這些模板可以作為自定義元素結(jié)構(gòu)的基礎(chǔ)，被反復(fù)使用

使用

接下來說一下 Web Components 的基本使用~

自定義組件

創(chuàng)建一個(gè)基礎(chǔ)的自定義組件包含以下步驟：

• 1、繼承： 自定義元素需要通過繼承HTMLElement類（或其子類）來創(chuàng)建
• 2、創(chuàng)建模板： 使用document.createElement('template')來創(chuàng)建一個(gè)新的模板元素
• 3、獲取影子DOM： 通過元素的attachShadow方法獲取影子DOM，為元素提供封裝的DOM結(jié)構(gòu)
• 4、添加內(nèi)容： 將模板內(nèi)容通過appendChild方法添加到影子DOM中。使用cloneNode方法克隆節(jié)點(diǎn)，避免對(duì)原始模板的污染。
• 5、定義組件： 使用customElements.define('component-tag-name', ComponentClassName)來定義組件，使其可在頁(yè)面中使用

至此，一個(gè)最基礎(chǔ)的自定義組件創(chuàng)建完成

圖片

拓展點(diǎn)：

• 在最初階段，我嘗試通過WebComponent.html的形式編寫自定義組件，這樣可以直接在標(biāo)簽中寫樣式和HTML，便于編輯器提供代碼提示和格式化。然而，由于當(dāng)前標(biāo)簽不支持直接導(dǎo)入HTML文件，除非通過HTTP GET請(qǐng)求加載外部HTML，但這種方法似乎違背了初衷。
• 要監(jiān)聽屬性的變化，必須通過static get observedAttributes靜態(tài)方法聲明哪些屬性是被監(jiān)聽的。之后，就可以在attributeChangedCallback回調(diào)函數(shù)中捕獲屬性變化。
• 自定義元素也擁有簡(jiǎn)化的生命周期鉤子，雖然只有三個(gè)，但它們的存在使得狀態(tài)管理變得簡(jiǎn)單。
• 支持使用插槽（slots），類似于Vue，可以通過的方式來實(shí)現(xiàn)內(nèi)容的插入。

在html中使用

• 當(dāng)引入自定義組件時(shí)，建議使用defer屬性，這樣可以確保腳本在文檔解析完成后再執(zhí)行，避免潛在的執(zhí)行順序問題。自定義組件的標(biāo)簽使用方式與Vue非常相似，即使用組件在define時(shí)指定的名稱，并通過slot="slot-name"來指定插槽的名稱。在Vue項(xiàng)目中，可以通過簡(jiǎn)單地導(dǎo)入組件的JavaScript文件（例如import "./components/WebComponent/WebComponent.js";）來使用這些自定義元素。

圖片

在實(shí)際使用中，可能會(huì)遇到一些挑戰(zhàn)：

• 通常情況下，自定義組件內(nèi)部和父組件都會(huì)包含一些業(yè)務(wù)邏輯，這可能需要父組件向子組件暴露某些方法。例如，在自定義組件被加入到頁(yè)面（即在connectedCallback被調(diào)用）之后，可能需要通知父組件，這時(shí)可以通過調(diào)用在父組件中定義的this.ready()方法。為了避免connectedCallback在ready方法定義之前執(zhí)行而導(dǎo)致錯(cuò)誤，推薦在引入自定義組件的腳本標(biāo)簽中加上defer
• 若需調(diào)用自定義組件的方法，必須確保自定義組件已經(jīng)完全創(chuàng)建好。因此，在示例中通過定義一個(gè)ready方法，并在connectedCallback調(diào)用之后執(zhí)行它，或者等待頁(yè)面的onload事件觸發(fā)后執(zhí)行。這意味著定義和調(diào)用之間的執(zhí)行順序需要特別注意，以避免由于執(zhí)行順序引起的問
• 監(jiān)聽屬性變化時(shí)，應(yīng)使用setAttribute方法來修改屬性值，因?yàn)橹苯有薷膶傩裕ㄈ鏴xtendP.attributes['size']=200）不會(huì)觸發(fā)屬性監(jiān)聽回調(diào)
• 關(guān)于插槽（slot）傳值的問題，目前似乎沒有直接的方法來實(shí)現(xiàn)

簡(jiǎn)而言之，雖然自定義組件的使用看似簡(jiǎn)單直接，但在實(shí)際開發(fā)中還是需要注意腳本加載順序、組件通信和屬性監(jiān)聽等細(xì)節(jié)問題，以確保組件能夠正確無誤地運(yùn)行

參考文章：https://juejin.cn/post/7309693162368565299