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

你可能感兴趣的:(component)