web components

web components

组件是前端的发展方向，现在流行的 React angular2.0 Vue 都是组件框架。

谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即Web Components 。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。目前，它还在不断发展，但已经可用于生产环境。

Web Components 标准非常重要的一个特性是，它使开发者能够将HTML页面的功能封装为 custom elements（自定义标签）。

首先我们需要知道，Web Components 包括了四个部分：
• Custom Elements
• HTML Imports
• HTML Templates
• Shadow DOM
这四部分有机地组合在一起，才是 Web Components。
可以用自定义的标签来引入组件是前端组件化的基础，在页面引用 HTML 文件和 HTML 模板是用于支撑编写组件视图和组件资源管理，而 Shadow DOM 则是隔离组件间代码的冲突和影响。

Custom Elements

概述
Custom Elements 顾名思义，是提供一种方式让开发者可以自定义 HTML 元素，包括特定的组成，样式和行为。支持 Web Components 标准的浏览器会提供一系列 API 给开发者用于创建自定义的元素，或者扩展现有元素。
https://developer.mozilla.org...

HTML Imports

概述
HTML Imports 是一种在 HTMLs 中引用以及复用其他的 HTML 文档的方式。
我们最常见的引入一个 css 文件的方式是：

Web Components 现在提供多了一个这个：

需要服务器环境，可以用nodejs搭一个

https://segmentfault.com/a/11...

HTML Templates

概述
这个东西很简单，用过 handlebars 的人都知道有这么一个东西：

其他模板引擎也有类似的东西，那么 HTML Templates 便是把这个东西官方标准化，提供了一个 template 标签来存放以后需要但是暂时不渲染的 HTML 代码。
以后可以这么写了：

Shadow DOM

Shadow DOM 好像提出好久了，最本质的需求是需要一个隔离组件代码作用域的东西，例如我组件代码的 CSS 不能影响其他组件之类的。

ShadowDOM-ShadowRoot
ShadowDOM主要解决一个文档中可能需要大量交互的多个DOM树建立和维护各自功能边界的问题

HTML支持的其他一些比如视频、音频甚至一些表单的控件，这些控件有些是由很复杂的界面组成的，其实这些界面也是用HTML+CSS写的
例如

CSS 相关
因为 Shadow DOM 很大程度上是为了隔离样式作用域而诞生的，主文档中的样式规则不对 Shadow DOM 里的子文档生效，子文档中的样式规则也不影响外部文档。

自定义元素可以给它指定全局样式
但是，组件的样式应该与代码封装在一起，只对自定义元素生效，不影响外部的全局样式。所以，可以把样式写在