根本原因是shadow dom阻断框架响应式劫持，vue/react无法遍历监听shadowroot中的节点变化，导致v-model失效、usestate不重绘、插槽未渲染；需暴露标准表单接口、手动注入样式、同步生命周期并正确声明observedattributes。
自定义元素在 Vue/React 应用里渲染失败，根本原因是 Shadow DOM 阻断了框架的响应式劫持
Vue 和 React 默认通过 patch DOM 节点来更新视图，但 attachShadow() 创建的 shadowRoot 是独立 DOM 树，框架无法自动遍历或监听其中节点变化。常见现象包括：v-model 绑定失效、useState 更新后子组件不重绘、插槽内容没渲染。
- 不要把自定义元素当普通组件直接写在 Vue/React 模板里（如
<my-input></my-input>），尤其当它内部用了shadowRoot - 若必须嵌入，需确保该自定义元素暴露标准表单属性接口（
value、disabled）和事件（input、change），让框架能“感知”其状态 - React 中避免用
dangerouslySetInnerHTML注入含自定义元素的 HTML 字符串——shadowRoot 初始化时机不可控，容易报Cannot read property 'appendChild' of null
样式冲突：框架全局 CSS 会穿透进自定义元素，除非你主动关掉
比如 Bootstrap 的 .btn 或 Tailwind 的 text-sm 类，只要没被 Shadow DOM 隔离，就会污染你的 <x-card></x-card> 内部样式。这不是 bug，是浏览器行为。
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
- 所有子应用或框架注入的 CSS（包括
<link rel="stylesheet">）默认作用于 light DOM，对 shadowRoot 无效 - 如果你在自定义元素里漏写了
this.attachShadow({ mode: 'closed' })，那它只是个普通标签，完全暴露在全局样式下 - 想复用框架工具类？得手动把对应 CSS 规则提取出来，用
adoptedStyleSheets或<style></style>注入到 shadowRoot —— 别指望@import或外部<link>自动生效
生命周期打架：Vue 的 onMounted 和自定义元素的 connectedCallback 不同步
Vue 组件挂载完成时，<x-table></x-table> 可能还没触发 connectedCallback，导致内部初始化逻辑滞后；反过来，自定义元素可能已渲染完毕，但 Vue 还没开始收集依赖。
- 不要在
connectedCallback里直接调用 Vue 的createApp或render—— 容易引发重复挂载或内存泄漏 - 推荐桥接方式：用自定义元素做“壳”，只负责接收 props 并透传给内部轻量级 JS 控件（比如用原生
document.createElement构建表格），避开框架生命周期 - 如果真要集成 Vue 子应用，宿主应用应统一控制微前端加载时机，在
customElements.whenDefined('x-table')后再触发 Vue mount，而不是靠nextTick猜测时机
属性绑定失效：HTML 属性 vs JS 属性，框架只管前者
Vue 的 :disabled="true" 会设置 HTML 属性 disabled=""，但如果你在自定义元素里只监听 this.disabled = true 这种 JS 属性赋值，就收不到更新。
- 必须在
static get observedAttributes()里声明要监听的属性名（如['value', 'disabled']） -
attributeChangedCallback收到的是字符串值，disabled是空字符串而非true，value永远是字符串，别直接赋给input.value期望类型一致 - 框架不会自动同步 JS 属性（如
el.checked = true），想支持双向绑定，得自己在 setter 里触发this.setAttribute('checked', '')
attachShadow 和 adoptedStyleSheets。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
