为什么 Web Components？

早期在我们构建web页面时，基本上都是通过组合HTML提供的标签来实现的，再简单点我们还可以拷贝黏贴bootstrap的css代码。随着页面中相同或类似UI的增加，使得代码冗余度增加，UI的重用性问题日益彰显。

尽管像angular这样的Javascript框架可以解决标签复用的问题，但是框架间的组件重用显得无能为力了。

这时 Web Components 的概念就出现了。

什么是 Web Components？

它是一系列web平台APIs（浏览器提供），允许你创建自定义的，可复用的，封装的HTML标签。简单点说就是一系列接口规则，希望浏览器们可以提供，但是由于浏览器政治存在，进度是缓慢的。

既然是接口规则，也就有了四个规范：

1. 自定义标签

自定义一些新的HTML标签，声明其行为和样式。可以分为两类：自定义标签和自定义内置元素； （HTML5添加了更多的语义化标签）

1. 影子DOM

为Web Components中的DOM和CSS提供封装。影子DOM使得这些与主文档的DOM保持分离。分离的原因大型页面没有很好的CSS组织结构（样式容易覆盖）

1. HTML导入

<link ref="import" href="components.html">

1. HTML模板

支持<template>模板标签

怎么实现 Web Components？

使用 ECMAScript 2015 类语法创建一个类，指定组件的功能

customElements.define(‘your-component’, YourComponentClass)注册自定义的标签

Element.attachShadow() 将一个影子DOM附加到自定义元素上

<template>和<slot>定义模板

接下来或分析： 添加跟多的例子 Polymer和X-tag源码