Vue 将自定义 Web Components 视为原生 DOM 节点，不实例化、不注入响应式，仅通过 createElement 创建元素、同步 attributes、渲染插槽，并依赖浏览器原生机制接管生命周期与更新。
其实，Vue 的 patch 过程本身并不直接“处理”自定义 Web Components。它的策略很明确：把这些元素当作普通 DOM 节点来对待。只要浏览器自己能正确解析和挂载，Vue 就乐得清闲，绝不干预其内部逻辑。
Vue 如何对待自定义元素
在 Vue 的虚拟 DOM 渲染管线里，自定义元素（比如 vnode.type === 'my-button'），而不是一个 Vue 组件。这意味着什么？意味着 Vue 不会尝试去实例化它，不会调用它的 setup 或 render 函数，更不会注入任何响应式上下文。
- 挂载时：Vue 只负责创建对应的真实 DOM 元素（
document.createElement('my-button')），然后插入到页面。之后的事情，就全权交给浏览器的原生机制去接管了。 - 更新时：如果 props 或 attributes 发生了变化，Vue 也仅仅会同步设置对应的 HTML 属性（比如
el.setAttribute('size', 'large')）。这个操作会触发 Web Component 自身的attributeChangedCallback生命周期，更新逻辑完全由组件内部定义。 - 子内容：插槽内容（像
Click me
属性与事件的桥接要点
这里有个关键点需要注意：Vue 无法自动将它的响应式数据映射为 Web Component 的 property（即 el.color = 'red' 这种赋值方式），它只能操作 attribute。因此，要确保两者顺畅协作，得注意以下几点：
- 属性同步：推荐在自定义元素的类定义中，通过
attributeChangedCallback来同步更新对应的 property。同时，记得在constructor或connectedCallback中读取初始的 attribute 值。 - 响应 v-model：如果想让自定义元素响应 Vue 的 v-model 指令，需要在元素内部手动派发
input或change事件，并且监听value这个 attribute 的变更。 - 监听自定义事件：监听自定义事件（例如
my-submit）反而很简单，直接使用@my-submit="onSubmit"即可，Vue 会自动帮你绑定addEventListener。
兼容性渲染的关键策略
当项目需要支持旧版浏览器（比如 IE11 或早期的 Edge），同时又想使用 Web Components 和 Vue 时，核心思路不是让 Vue 去“兼容 Web Components”，而是做好分层兜底。这才是关键所在。
立即学习“前端免费学习笔记（深入）”；
- 特性检测与降级：首先对 Web Components 进行特性检测（
'customElements' in window）。如果不支持，则降级为使用纯 Vue 组件或普通 HTML 来模拟实现相同功能。 - 引入官方 Polyfill：引入
@webcomponents/webcomponentsjs这个官方 Polyfill。需要特别注意，优先加载custom-elements-es5-adapter.js，它可以解决在 ES5 环境下因class extends HTMLElement语法而导致的报错问题。 - 避免混用未注册标签：尽量避免在 Vue 模板中混用未注册的自定义标签。否则，Vue 编译器可能会报错，或者静默忽略它们。一个实用的建议是，用动态的
v-if来控制是否渲染这些元素。 - 样式隔离与通信：Shadow DOM 带来的样式隔离与 Vue 的 scoped style 是互不干扰的。但如果需要从外部注入样式（比如主题色），应该通过 CSS Custom Properties（例如
--theme-color）来进行通信。
话说回来，Vue 和 Web Components 本质上是正交的两套技术栈：Vue 负责管理数据流和声明式更新，而 Web Components 负责实现封装和跨框架复用。二者的协作，不依赖于深度的框架集成，而是依靠标准的 DOM 接口进行对齐。理解这一点，就能更好地驾驭它们了。
