Web Components

原因

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

構成

Web Components 由三個主要部分構成，與Vue的模板非常相似：

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

使用

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

自定義組件

創建一個基礎的自定義組件包含以下步驟：

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

至此，一個最基礎的自定義組件創建完成

圖片

拓展點：

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

在html中使用

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

圖片

在實際使用中，可能會遇到一些挑戰：

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

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

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