Web Components是原生的组件化开发技术,它可以让我们创建自定义的HTML元素,功能和样式都封装在组件内部,不影响其他元素。Web Components与现有的React、Vue不冲突,而是相辅相成的。
Web Components里有个三个核心概念:
1. 自定义元素
自定义元素是通过在JavaScript中继承HTMLElement或者现有的HTML DOM对象来实现的。自定义元素有4个生命周期函数:
2. shadow DOM(影子DOM)
shadow dom和普通的document对象几乎一样,但它是专门用于自定义的HTML元素,shadow dom完全独立于普通的DOM,需要把它挂载到一个独立的DOM节点上。
3. HTML模板
是为了方便编写自定义的HTML代码和CSS样式。
参考链接1:https://www.ruanyifeng.com/blog/2019/08/web_components.html
参考链接2:https://www.bilibili.com/video/BV1Rh411y7kB/?spm_id_from=333.337.search-card.all.click&vd_source=4c263677a216945c0d21ca65ee15a5f9
参考链接3:https://www.bilibili.com/video/BV1Rh411y7kB/?spm_id_from=333.337.search-card.all.click