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元素。