html、body等全局标签样式天然冲突，因其唯一性与CSS规则无限制叠加导致覆盖；唯一可靠隔离手段是Custom Elements中在constructor内调用attachShadow({mode:'closed'})，配合DOMParser解析+adoptedStyleSheets注入及第三方库前缀改造。
HTML 标签样式（html、body、button 等）无法安全共享，必须隔离——否则子应用重置 body 字体、覆盖 button 默认边距、注入 normalize.css，主应用立即失色、错位、交互异常。
为什么 html 和 body 样式天然冲突？
它们是全局唯一节点，浏览器不允许多个同名元素共存，但 CSS 规则无此限制。子应用一旦声明 body { font-size: 14px; }，主应用的 body { font-size: 16px; } 就被覆盖；若两个子应用都引入 Ant Design 的 reset，html 的 font-smoothing 或 scrollbar 设置会互相干扰。
常见错误现象：
- 主应用暗黑模式切换后，子应用按钮文字仍为浅色（因子应用
body重置了color继承链） - 子应用加载后页面整体缩放，控制台显示多个
font-size声明在body上叠加生效 -
document.body.classList.add('theme-dark')被子应用执行，整个页面变暗，连主应用导航栏也受影响
attachShadow({ mode: 'closed' }) 是唯一能封住 html/body 泄漏的手段
Custom Elements 本身不隔离样式，customElements.define() 只注册标签名，DOM 插入仍在 light DOM 中。只有显式调用 attachShadow 并设为 'closed'，才能切断外部样式穿透和内部样式逃逸。
立即学习“前端免费学习笔记（深入）”；
实操要点：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须在
constructor()中调用，connectedCallback()已太晚——此时body相关样式可能已被解析并应用 -
mode: 'open'等于放弃隔离：外部可通过el.shadowRoot直接修改内部style标签，或插入恶意规则 -
mode: 'closed'下el.shadowRoot返回null，但 DevTools 中可展开#shadow-root查看（需开启 “Show user agent shadow DOM”） - CI/CD 流水线应强制检查：所有
attachShadow调用必须含{ mode: 'closed' }，否则阻断构建
子应用 HTML 片段不能直接 innerHTML = htmlString
直接赋值会令内联 <style> 和 <script> 逃逸至全局作用域：<style>body{margin:0}</style> 会污染主应用 body，<script>document.body.classList.add('xxx')</script> 仍在全局执行。
正确做法是预处理 + 沙箱注入：
- 用
DOMParser解析 HTML 字符串，提取所有<style>内容，转为CSSStyleSheet实例，再通过shadowRoot.adoptedStyleSheets = [sheet]注入（Chrome 73+ / Safari 16.4+ 支持） - 剥离所有
<script src="...">，拦截请求，代理返回带 scope 前缀的 CSS 文本（如将.btn转为micro-app[name="sub-a"] .btn） - 禁用内联
<script>console.log(1)</script>，改为沙箱环境（重绑定this/window/document到当前 Shadow Root）中执行 - 所有
@import、相对路径（url(./icon.png)）、CSS 变量继承链断裂问题，需在代理阶段统一重写资源路径与变量透传逻辑
第三方 UI 库（如 Ant Design、Element Plus）必须改造前缀
它们默认使用固定 prefixCls（如 ant-btn），多个子应用同时引入，.ant-btn 样式必然冲突。不能依赖“约定不重复引入”，而要主动隔离。
可行路径：
- Ant Design 提供
ConfigProvider，可在子应用入口包裹<ConfigProvider prefixCls="suba-ant">，所有组件类名自动加前缀 - Element Plus 支持
namespace配置，设为suba-el后生成suba-el-button - 未提供配置项的库（如某些旧版组件），需用 PostCSS 插件在构建阶段对所有 CSS 文件添加 selector 前缀，例如将
.modal-overlay→micro-app[name="sub-a"] .modal-overlay - 禁止子应用在
index.html中直接<link rel="stylesheet" href="antd.css">，必须走主应用资源代理层做 scope 化处理
真正难的不是加 Shadow DOM，而是让子应用彻底放弃对 document.body 和全局标签选择器的隐式依赖——比如一个按钮组件内部写了 document.querySelector('button')，或样式里用了 button:focus，这些都会在 Shadow DOM 外失效或穿透。这类细节，往往上线后才暴露。
