Web Components 規範學習

最新的規範在這裏：http://w3c.github.io/webcomponents/explainer/

依據規範，有如下四個組成部分：

• Templates
• Custom Elements
• Shadow DOM
• Imports

 

Templates

這裏引入了一個新的HTML元素，叫作template。該元素的特色是其中的內容雖然會被瀏覽器解析（規範上這麼說），可是並不會被真正的激活，例如腳本不會被執行，圖片不會被加載，也不會被渲染到頁面上。直到經過腳本把它激活。

這篇文章對template元素的使用有講解（http://www.html5rocks.com/en/tutorials/webcomponents/template/）。

Custom Elements

能夠自定義元素名稱和行爲，也能夠對現有的HTML元素進行擴展。定義的時候首先須要調用registerElement。

Shadow DOM

Shadow DOM提供了一種將展示和內容分離的機制，展示和內容分離這個概念不是很新了，很早之前咱們就知道HTML和CSS要各司其職，HTML負責內容，CSS負責展示。但實際上這個分離還不夠完全。爲何呢？由於爲了某些展示效果，咱們不得不在HTML增長一些輔助的元素，同時配合樣式來實現某些效果。這樣就不能說HTML是僅僅負責內容了，它仍是或多或少爲展示服務。Shadow DOM的做用就是將HTML中那些負責展示的部分也提出來放在別的地方，只剩下內容部分保留的HTML中，真正作到分離。具體作法請參考規範。這篇文章也對Shadow DOM有講解（http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/）。

有個概念仍是在這裏說一下，普通的HTML元素能夠擁有一個叫作shadow root的結點，而有shadow root結點的元素會被稱做shadow host。

Imports

提供一種重用HTML文檔的方法，經過link標籤，制定rel屬性爲import，能夠把一份HTML文檔導入進來。經過js能夠訪問HTML中的DOM元素。