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元素。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
