Web Components

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