组件化统一标准——Web Components

最新推荐文章于 2024-07-30 09:52:53 发布

weixin_33682719

最新推荐文章于 2024-07-30 09:52:53 发布

阅读量621

点赞数

文章标签：前端 javascript webpack ViewUI

原文链接：https://segmentfault.com/a/1190000017091755

版权

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增加、删除、修改自身属性时，被调用。

图片描述