Patch 过程如何处理自定义 Web Components：Vue 兼容性渲染的底层策略

Vue 将自定义 Web Components 视为原生 DOM 节点，不实例化、不注入响应式，仅通过 createElement 创建元素、同步 attributes、渲染插槽，并依赖浏览器原生机制接管生命周期与更新。

Vue 的 patch 过程本身不直接“处理”自定义 Web Components，而是把它们当作普通 DOM 节点对待——只要浏览器能正确解析和挂载，Vue 就不会干预其内部逻辑。

Vue 如何对待自定义元素

在 Vue 的虚拟 DOM 渲染管线中，自定义元素（如 <my-button></my-button>）被识别为原生标签节点（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
• 子内容：插槽内容（<my-button>Click me</my-button>）会被 Vue 当作 children 渲染进 light DOM，Web Component 内部可通过 <slot> 投影显示

属性与事件的桥接要点

Vue 无法自动将 reactive 数据映射为 Web Component 的 property（如 el.color = 'red'），只能操作 attribute。因此需注意：

• 推荐在自定义元素类中，通过 attributeChangedCallback 同步更新对应 property，并在 constructor 或 connectedCallback 中读取初始 attribute 值
• 要响应 Vue 的 v-model，需在自定义元素中手动 dispatch 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，优先加载 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 接口对齐。