shadow dom 不能彻底隔离样式，仅在 closed 模式下对挂载于 shadow root 内的元素生效；微前端中若子应用直接操作 document.body，则样式仍会泄漏，且不兼容 ie、safari 存在继承 bug，事件与全局对象访问亦被切断。
Shadow DOM 能彻底隔离样式吗？
不能，但它是目前最接近“真正隔离”的原生方案。关键在于 Shadow DOM 的 mode 必须设为 "closed"（默认是 "open"），否则外部 JS 仍可绕过访问内部样式树；而且它只对挂载在 Shadow Root 下的元素生效——微前端里若子应用用 document.appendChild 直接写入主文档，Shadow DOM 完全不兜底。
常见错误现象：style 标签写在 Shadow Root 里，但子应用里用 document.querySelector('body') 动态插入的节点没进 Shadow DOM，样式立刻泄漏。
- 必须确保子应用所有 DOM 操作都限定在自己的
shadowRoot内，包括第三方 UI 库的挂载点 - React/Vue 等框架需配置
rootNode或mount到shadowRoot，不能默认挂document.body -
closed模式下无法调试：Chrome DevTools 不显示内部结构，得靠console.dir(shadowRoot)查看
为什么很多微前端框架不用 Shadow DOM 而选样式沙箱？
因为兼容性、性能和接管成本太高。IE 完全不支持；Safari 对 slot 和 CSS 自定义属性继承有 bug；更关键的是，Shadow DOM 会切断全局事件冒泡、window 和 document 上下文，导致子应用里所有依赖全局对象的代码（比如 document.addEventListener('click', ...)）全部失效。
使用场景：适合轻量级、可控的子应用（如纯 Web Component 封装的仪表盘卡片），不适合直接接入未改造的 Vue/React 单页应用。
- 样式沙箱（如 qiankun 的
scopedCSS）本质是运行时重写 CSS 选择器，加前缀或动态切换data-属性，不改 DOM 结构 - Shadow DOM 需要子应用完全重构渲染入口，而样式沙箱只需加载时劫持
insertRule和appendChild - 频繁切换子应用时，Shadow DOM 创建/销毁开销明显大于样式沙箱的 class 切换
样式沙箱里 class 前缀冲突怎么破？
不是所有 class 都能加前缀——伪类、属性选择器、全局选择器（body、html）、@keyframes 名都会漏掉。qiankun 默认用子应用 name 作前缀，但如果你子应用里写了 .btn:hover，沙箱只会处理成 [qiankun-xxx] .btn:hover，而不会变成 [qiankun-xxx] .btn[qiankun-xxx]:hover，所以 hover 依然可能被主应用样式覆盖。
常见错误现象：按钮悬停颜色不对，动画不触发，字体全局被重置。
- 避免在子应用中使用无命名空间的全局选择器，尤其是
body、* {}、button {} - 用 CSS Modules 或
:where()/:is()包裹关键规则，降低 specificity 冲突概率 - 第三方库样式（如 antd）建议用
reset.css+prefixer工具预处理，而不是靠运行时沙箱硬扛
iframe 真的比 Shadow DOM 更安全？
是的，但代价是通信成本和体验断层。iframe 天然隔离 CSS、JS、localStorage、cookie，连 font-face 和 @import 都互不干扰。但它无法共享主应用登录态（除非显式透传 token）、不支持 DOM 级别交互（比如主应用菜单展开后子应用要自动聚焦输入框）、且每次切换子应用都要 reload。
性能影响：首次加载慢（资源重复下载），内存占用高（每个 iframe 独立 V8 实例），iOS Safari 下 postMessage 延迟明显。
- 仅推荐用于强隔离需求场景：比如嵌入不可信的第三方管理后台、合规审计要求 DOM 完全隔离
- 不要用
srcdoc加载子应用 HTML，会导致 CSP 报错；务必用同源src，并配置sandbox="allow-scripts allow-same-origin" - 主应用与 iframe 间通信必须用
postMessage+origin校验，别信window.frames[0].contentWindow
Shadow DOM 和样式沙箱都不是银弹，真正难的不是加前缀或建 shadowRoot，而是子应用是否愿意放弃对全局环境的隐式依赖——这点常被忽略，直到上线后发现字体、滚动条、focus outline 全乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
