Web Components（一）入门

摘要：随着页面中相同或类似的增加，使得代码冗余度增加，的重用性问题日益彰显。影子使得这些与主文档的保持分离。分离的原因是如果复杂页面没有很好的组织结构，样式容易覆盖。

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

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

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

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

既然需要浏览器来实现，也就需要规范，Web Components有四个规范（其中最重要的就是自定义元素和影子DOM）：

自定义一些新的HTML标签，声明其行为和样式。可以分为两类：自定义标签和自定义内置元素。

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

支持