Shadow DOM 不能自动解决微前端 CSS 冲突，仅隔离挂载在其内部的元素；子应用若直接操作 document.body 或动态插入全局节点，样式立即泄漏，且需手动处理 @font-face、@keyframes、第三方库挂载点及框架挂载逻辑。
Shadow DOM 不能自动解决微前端的 CSS 冲突，它只对挂载在其内部的元素生效；一旦子应用绕过 shadowRoot 直接操作 document.body 或动态插入节点到主文档，样式立刻泄漏。
Shadow DOM 的隔离边界非常明确
它不是“给整个子应用套个壳”就万事大吉。隔离只发生在 shadowRoot 节点树内部：子应用渲染的所有 DOM 必须作为其子节点存在，且所有样式规则必须注入到该 shadowRoot 中（比如通过 shadowRoot.appendChild(styleEl) 或 CSSStyleSheet.insertRule）。否则，document.querySelector('.btn') 找到的仍是全局节点，样式自然不生效。
常见错误现象：
- 子应用用
document.body.appendChild(div)弹出一个全局提示框，这个div完全不受 Shadow DOM 控制 - 第三方 UI 库（如 antd、element-plus）默认挂载到
document.body，需显式配置getContainer指向shadowRoot -
@font-face和@keyframes不会自动继承进 Shadow DOM，必须手动克隆并注入
qiankun 的 strictStyleIsolation: true 并不等于“开箱即用”
这个配置会强制创建 shadowRoot 并把子应用根节点塞进去，但代价是：子应用内所有 DOM 查询和事件监听必须切换上下文。
立即学习“前端免费学习笔记（深入）”；
你不能再写：
document.querySelector('.header')
而必须写：
shadowRoot.querySelector('.header')
更麻烦的是，框架层往往不默认支持。例如：
- Vue 3 的
createApp默认 mount 到document，需传入{ root: shadowRoot }或重写app.mount() - React 的
ReactDOM.createRoot()必须指向shadowRoot，而非document.getElementById('root') -
window.addEventListener('resize')在 closed 模式下根本收不到事件，因为window不在 shadow 上下文中
为什么 styledIsolation: true 经常看起来“没效果”
因为它的行为依赖容器是否已有 shadowRoot。如果主应用只是给子应用预留了一个普通 <div id="subapp"></div>，qiankun 会 fallback 到往 <head> 插入 <style> 标签——这和没隔离一样。
要让它真正起效，必须满足两个条件：
- 主应用提前为子应用创建带
shadowRoot的容器：const container = document.getElementById('subapp'); container.attachShadow({ mode: 'closed' }); - 子应用初始化逻辑必须感知并使用该
shadowRoot作为挂载点和样式注入目标
否则，styledIsolation: true 只是徒增一次无效的 CSSStyleSheet 创建，实际样式仍走全局 <head>。
兼容性和调试成本经常被低估
Shadow DOM 在 Safari 上对 CSS Custom Properties 继承有 bug，在 IE 中完全不可用；closed 模式下 Chrome DevTools 不显示内部结构，只能靠 console.dir(shadowRoot) 查看；事件无法冒泡到主应用，document 级 API 全部失效——这些不是“高级特性”，而是日常开发中必须绕开的硬伤。
真正能落地的方案，往往是组合：用 shadowRoot 封装独立组件（如侧边栏、弹窗），用 data- 前缀 + 运行时选择器重写兜底主应用样式，再靠设计系统统一令牌（--primary-color）约束变量使用范围。
