Web Components基本概念

最近在個人專案的開發上稍微接觸了 Polymer 這個框架，大概用了三個月的時間，我想我還蠻喜歡 Web Components 與 Polymer 的。應該是種回歸之前剛使用 jQuery 時直接操作DOM的感覺吧，同時 Polymer 也有一些如同前端框架給予的 data-binding ，總之就來寫點東西吧。

講到 Web components，大致是這三個東西：

1. Template
2. Shadow DOM
3. Custom elements

我想我會用一些比較簡單的 code 做個介紹就好。

Template

之前在學習一些前端框架時，有學到一些創造可重用的組件，不過就算不提到那些框架，我們一般應該也會嘗試去降低重複性的 code ，並提高重用。

那麼 template 元素就是這個目標的第一步，藉由這個元素我們可以記錄要重複利用到的 DOM 結構。

簡單來說 template 元素在頁面載入時不會被渲染出來，可以說是一個隱藏的 DOM ，而在我們需要的時候可以將這個隱藏的 DOM 抓出來使用。

可以看到我們只是抓出了這個 template 後，使用cloneNode()的將內容給複製出來，就這麼簡單。

Shadow DOM

如果可以的話，我們所準備的元件都能簡單直覺的建立，又能夠獨立運作而不在命名上相互影響，一定很棒。

這就是為什麼要提到 Shadow DOM 的理由了， Shadow DOM 提供了 DOM 與 CSS 的封裝，讓 Shadow DOM 內的內容與外部 DOM 之間獨立了開來。

也就是說：

1. Shadow DOM 中的<style>不會影響到外部其他的元素
2. 在一 Shadow DOM 外使用querySelector()你不會得到這個 Shadow DOM 內的元素，同樣的當你在 Shadow DOM 內部使用querySelector()也不會得到外部的元素。

看到了嗎，我一樣使用到了 template ，不過這次我以 attachShadow()在container 這個 div 內加入了一個 Shadow DOM ，並且在裡面加上了一個<style>，在將新的 div 時，我們會發現在 container 外部的 test1 文字竟然不會跟著被影響到。

Custom elements

差不多要講完啦，來談談怎麼自定義一個元素吧。

有了 Shadow DOM ，我們馬上就能想像到，把特定結構創造出來時包個Shadow DOM 不就皆大歡喜了嗎?

在這裡我們使用到了 class 的語法，建立一個HTMLElement的原型繼承，在constructor()裡面加入 Shadow DOM、加入<style>和所需要用到的元素，最後使用customElements.define()就可以註冊好這個元素啦。

可以看到我們註冊後，之後如同一般的tag一樣，即可使用createElement()將我們自定義的元件拿出來重複用了。

基本上到這已經是差不多了，不過還有個 template 沒用到是吧？

使用 template 就可以用熟悉的標籤語法來打了，也省了用 js 去建立元素這般繁瑣的行為。