组件化统一标准——Web Components

Web Components是什么

一句话归纳，Web Components是一个Web组件标准。如今的前端开发几乎已经离不开组件化开发了，不管是vue中的模板语法仍是react中的JSX，都是把结构、样式和逻辑封装成一个组件，采用组件复用来提升开发效率。既然组件如此重要，Web Components就是提供浏览器底层的支持，不依赖各类框架的支持和webpack的编译，让咱们也能使用组件。Web Components经过一种标准化的非侵入的方式封装一个组件，每一个组件能组织好它自身的HTML、CSS、JavaScript，而且不会干扰页面上的其余代码。

Web Components的组成

Web Components由如下四个部分组成：

HTML templates

支持template标签和slot标签。slot标签支持动态替换模板中的HTML内容，它用name属性来做为惟一表示。template中的内容被插入到DOM以前，不会渲染，它能够放在document中的任何位置。

HTML Imports

改造一下上面的例子，将template的内容写到一个新的main.html文件中，而后经过link引入。

Shadow DOM

Shadow DOM提供了一种健壮的封装方式来作到页面节点的隔离，避免全局样式冲突,这也是Web Component的核心优点。

Shadow DOM中设置的样式没有影响外部<p>标签的样式。

Custom elements

在custom element的构造函数中，能够指定多个不一样的回调函数，它们将会在元素的不一样生命时期被调用：
connectedCallback：当 custom element首次被插入文档DOM时，被调用。
disconnectedCallback：当 custom element从文档DOM中删除时，被调用。
adoptedCallback：当 custom element被移动到新的文档时，被调用。
attributeChangedCallback: 当 custom element增长、删除、修改自身属性时，被调用。

参考资料

https://developer.mozilla.org...
https://www.w3cplus.com/web-c...
https://www.sitepen.com/blog/...