什么是 Web Components?
Web Components 是一套 Web 原生的 API 的总称，它允许我们在其支持的环境，创建自定义元素，使用的时候只需要使用自定义元素的标签即可。需要注意的是 Web原生，这意味着 Web 组件可以在任何框架场景或者原生环境中使用！当我们面临的业务是不同技术栈时，Web 原生组件（下称 Web 组件）无疑会是一个值得考虑的选择。
Web Components 基础
1. 三项核心技术：
Custom element（自定义元素） ：一组 JavaScript API，允许您定义 custom elements 及其行为，然后可以在您的用户界面中按照需要使用它们。
Shadow DOM（影子 DOM） ：一组 JavaScript API，用于将封装的“影子” DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
HTML template（HTML 模板）： <template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
说说我的理解：
Custom element 允许我们能够将拥有一些业务逻辑的 Web 组件封装为一个新的浏览器能够识别的 HTML 标签，拥有交互行为，而不仅仅是一个单纯的 UI 组件。
Shadow DOM 允许我们使用的 Web 组件与正常的 DOM 隔离，在能够组织好自身的 HTML 结构、CSS 样式、JS 代码的同时，不影响正常文档的 DOM 节点，不会与正常的 DOM 冲突。
HTML template 允许 Web 组件具备模板/插槽的基本能力，能够将 DOM 模板/元素等自定义内容插入到标记位置，让 Web 组件灵活性更加强大、复用性更强。
2. 生命周期
与 Vue 等组件一样，Web 组件也具有生命周期这一概念，并提供了相应的钩子函数，允许我们在组件的生命周期不同阶段中执行一些自定义的业务操作，便于更好的控制和使用组件实例，以支持更多的场景：
connectedCallback：当自定义元素第一次被连接到文档 DOM 时被调用。
disconnectedCallback：当自定义元素与文档 DOM 断开连接时被调用。
adoptedCallback：当自定义元素被移动到新文档时被调用。
attributeChangedCallback：当自定义元素的一个属性被增加、移除或更改时被调用。
3、如何使用 Vue 创建 Web 组件
蛋炒饭这个时候已经有了一个 Vue 版本的组件，自然希望能够找到一种方法可以直接将 Vue 组件转换为 Web 组件，这样就可以最快捷最方便的解决问题。
碰巧的是，Vue3 刚好提供了这个能力，Vue3.2 版本提供了一个和定义一般 Vue 组件几乎完全一致的 defineCustomElement 方法来支持创建自定义元素。这就允许我们可以在不用额外学习 Web Components 语法的情况下，继续使用 Vue 框架开发 Vue 组件，最后调用 API 完成组件的转换。接下来我将以一个计数器组件为例，介绍如何使用 Vue 创建 Web 组件
4.如何使用 Web 组件
Vue 项目中使用
来到 App.vue 或者任一 .vue 文件，读取 src/MyCount/index.ts 文件，调用其中注册方法，然后直接在模板中进行使用：
xml
复制代码
// App.vue
<script setup lang="ts">
import { register } from './MyCount/index';
register('my-count'); // 自定义标签取名为my-count
</script>
<template>
// 像使用原生标签一样直接使用
<my-count></my-count>
</template>
