Vue 的虚拟 DOM 与 Web Components 可协同工作：虚拟 DOM 管理内部视图更新，Web Components 提供原生封装；需配置 isCustomElement 识别自定义元素，正确绑定 property 与 attribute，用 defineCustomElement 导出组件，并通过 CustomEvent 和 ref 实现双向通信。
Vue 的虚拟 DOM 和 Web Components 并不冲突，而是可以各司其职、协同工作：虚拟 DOM 负责高效更新 Vue 组件内部视图，Web Components 提供原生封装与跨框架能力；关键在于让两者的数据流和生命周期自然对齐。
Vue 渲染时正确识别自定义元素
默认情况下，Vue 会把 <my-button> 这类标签当作未注册的 Vue 组件处理，导致警告或渲染失败。必须显式声明哪些标签属于原生自定义元素：
- 在 Vite 中，通过
vue({ template: { compilerOptions: { isCustomElement: tag => tag.includes('-') } } })配置，通常匹配含短横线的标签名 - 在 CDN 或非构建环境里，创建应用前设置：
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('x-') || tag.includes('-') - 避免漏配——哪怕只用一个自定义元素，也需开启此配置，否则 v-bind 和事件绑定可能失效
响应式数据精准流向 Web Components
Vue 向自定义元素传值时，会自动区分 attribute（字符串）和 property（任意类型）。能否正确赋值，取决于目标元素是否正确定义了对应 property：
- 若自定义元素已定义
static get observedAttributes()并在attributeChangedCallback中同步到 property，则 Vue 的v-bind:count="5"会触发属性更新 - 若 property 未初始化（如未在
constructor中声明），Vue 可能仍写入 attribute，此时需手动映射或改用:count.prop="5"强制设为 property - 布尔值特别注意：
disabled="false"在 HTML attribute 中仍是 true，应使用:disabled="false"绑定到 property 才生效
用 defineCustomElement 导出可复用组件
Vue 提供 defineCustomElement 将标准组件转为原生自定义元素，它保留响应式能力但不依赖 Vue 运行时：
立即学习“前端免费学习笔记（深入）”；
- 组件内
props、computed、watch照常工作，数据变化自动更新 Shadow DOM - 生命周期自动映射：
onMounted对应connectedCallback，onUnmounted对应disconnectedCallback - 导出后调用
customElements.define('my-counter', MyCounter)，即可在纯 HTML、React 或 Angular 项目中直接使用：<my-counter count="10"></my-counter>
事件与方法的双向通信
Vue 和 Web Components 之间可通过标准 DOM 机制互通：
- 自定义元素派发
CustomEvent，Vue 用@event-name监听，例如<my-input @change="onInputChange"></my-input> - Vue 组件获取自定义元素实例后，可直接调用其公开方法：
this.$refs.myEl.doSomething() - 若需从 Web Component 主动调用 Vue 方法，建议通过事件传递数据，而非反向引用，保持解耦
