什么是Web Compnnets

还记得当document.querySelector最开始被广泛的被浏览器支持并且结束了无处不在的JQuery。这最终给我们提供了一个原生的方法，虽然JQuery已经提供了很久。我觉得这同样将会发生在像Angular和React这的前端框架身上。

这些框架可以帮助我们去做一些做不到的事情，比如创建可以复用的前端组件，但是这样需要付出复杂度、专属语法、性能消耗的代价。但是这些将会得到改变。

现代浏览器的API已经更新到你不需要使用一个框架就可以去创建一个可复用的组件。Custom Element和Shadow DOM都可以让你去创造可复用的组件。

创造一个你定制的HTML标签，它将会继承HTM元素的所有属性，并且你可在任何支持的浏览器中通过简单的引入一个script。所有的HTML、CSS、JavaScript将会在组件内部局部定义。这个组件在你的浏览器开发工具中显示为一个单独个HTML标签，并且它的样式和行为都是完全在组件内进行，不需要工作区，框架和一些前置的转换。

简言之，通过一种标准化的非侵入的方式封装一个组件；

优势：

1.W3C标准化API（只有HTML、CSS、JAVASCRIPT）；

2.易于继承，无需编译；

3.真正的局部CSS作用域（以往的scoped 存在穿透）

4.与框架无关（一次开发,避免重复造轮子）；

5.可与第三方框架无缝集成（多处使用）；

两大利器

Custome Element

使用web 内建的组建模型来定义组件；

Shadow DOM

将标记结构、样式和行为隐藏起来；

简介清晰的DOM树，隔离代码；

组件生命周期

connectedCallback：当 custom element首次被插入文档DOM时，被调用。
disconnectedCallback：当 custom element从文档DOM中删除时，被调用。
adoptedCallback：当 custom element被移动到新的文档时，被调用。
attributeChangedCallback: 当 custom element增加、删除、修改自身属性时，被调用。

不得不提的兼容性问题

标准 polyfill支持

可兼容至IE 11;

https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

第三方框架对Custome Element 的支持情况

除了DIO、Mithril 、Polymer 、React 、Skate w/ Preact外，其他框架均支持良好；

注：（数据来源： https://custom-elements-everywhere.com/）

canius数据

https://www.caniuse.com/#search=web%20components

目前，Chrome、Firefox、Safari和Opera的最新版本都支持定制元素，即将推出的Edge 19也将支持定制元素。在iOS和Android上，Safari、Chrome和Firefox都支持它们。

是否应该抛弃已有第三方框架

目前的前端框架具有数据绑定、状态管理和相当标准化的代码库等功能所带来的额外价值。问题是你的应用是否真的需要它（例如静态网页并不需要）。

清晰定义的工作方式和样式指南比简单的使用框架更有助于代码库的一致性。框架也带来了额外的复杂性。

Web Components 相关的库

Hybrids is a UI library for creating Web Components with simple and functional API.
LitElement uses lit-html to render into the element's Shadow DOM and adds API to help manage element properties and attributes. Polymer provides a set of features for creating custom elements.
Slim.js is an opensource lightweight web component library that provides data-binding and extended capabilities for components, using es6 native class inheritance.
Stencil is an opensource compiler that generates standards-compliant web components.