谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。目前，它还在不断发展，但已经可用于生产环境。
基本概念
Web Components 由这四种技术组成
- 自定义元素 (Custom Elements)
- HTML模板 (HTML Templates)
- 影子DOM (Shadow DOM)
- HTML导入 (HTML Imports)
对应的接口
1、四种新的HTML元素: , , ,
2、与新元素相关的API接口：
- HTMLTemplateElement
- HTMLContentElement
- HTMLElementElement
- HTMLShadowElement
3、HTMLLinkElement 接口的拓展，以及 元素
4、一个注册新元素的接口：
- Document.registerElement()
- Document.createElement()
- Document.createElementNS()
5、自定义元素的原型(prototype)可以添加新的生命周期回调(lifecycle callbacks)
6、元素的默认样式中添加新的CSS伪类(pseudo-classes)
- :unresolved.
7、影子DOM:
Shadow DOM 为Web组件中的 DOM和 CSS提供了封装。Shadow DOM 使得这些东西与主文档的DOM保持分离。你也可以在一个Web组件外部使用 Shadow DOM本身。
为什么要把一些代码和网页上其他的代码分离？原因之一是，大型站点若CSS没有良好的组织，导航的样式可能就『泄露』到本不应该去的地方，如主要内容区域，反之亦然。随着站点、应用的拓展，这样的事难以避免。
- ShadowRoot
- Element.createShadowRoot()
- Element.getDestinationInsertionPoints()
- Element.shadowRoot
8、Event 接口的拓展：Ev
