组件化统一标准——Web Components

3

Web Components是什么

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

Web Components的组成

Web Components由以下四个部分组成:
clipboard.png

HTML templates

支持template标签和slot标签。slot标签支持动态替换模板中的HTML内容,它用name属性来作为唯一表示。template中的内容被插入到DOM之前,不会渲染,它可以放在document中的任何位置。
图片描述

HTML Imports

改造一下上面的例子,将template的内容写到一个新的main.html文件中,然后通过link引入。
图片描述

Shadow DOM

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

clipboard.png

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

Custom elements

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

图片描述
图片描述
clipboard.png

参考资料

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

你可能感兴趣的

载入中...