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