組件化統一標準——Web Components

Web Components是什麼

一句話歸納，Web Components是一個Web組件標準。如今的前端開發幾乎已經離不開組件化開發了，不管是vue中的模板語法仍是react中的JSX，都是把結構、樣式和邏輯封裝成一個組件，採用組件複用來提升開發效率。既然組件如此重要，Web Components就是提供瀏覽器底層的支持，不依賴各類框架的支持和webpack的編譯，讓咱們也能使用組件。Web Components經過一種標準化的非侵入的方式封裝一個組件，每一個組件能組織好它自身的HTML、CSS、JavaScript，而且不會干擾頁面上的其餘代碼。

Web Components的組成

Web Components由如下四個部分組成：

HTML templates

支持template標籤和slot標籤。slot標籤支持動態替換模板中的HTML內容，它用name屬性來做爲惟一表示。template中的內容被插入到DOM以前，不會渲染，它能夠放在document中的任何位置。

HTML Imports

改造一下上面的例子，將template的內容寫到一個新的main.html文件中，而後經過link引入。

Shadow DOM

Shadow DOM提供了一種健壯的封裝方式來作到頁面節點的隔離，避免全局樣式衝突,這也是Web Component的核心優點。

Shadow DOM中設置的樣式沒有影響外部<p>標籤的樣式。

Custom elements

在custom element的構造函數中，能夠指定多個不一樣的回調函數，它們將會在元素的不一樣生命時期被調用：
connectedCallback：當 custom element首次被插入文檔DOM時，被調用。
disconnectedCallback：當 custom element從文檔DOM中刪除時，被調用。
adoptedCallback：當 custom element被移動到新的文檔時，被調用。
attributeChangedCallback: 當 custom element增長、刪除、修改自身屬性時，被調用。

參考資料

https://developer.mozilla.org...
https://www.w3cplus.com/web-c...
https://www.sitepen.com/blog/...