全局 html/body 样式天然不隔离，因其是文档唯一根元素，CSS 作用域机制对其完全失效；strictStyleIsolation 和容器前缀均无法覆盖，唯一可靠方案是主应用统一管控、子应用禁止直接操作。
全局 html 和 body 标签的样式无法被子应用独占，只要一个微应用设置了 body { font-size: 14px }，所有其他微应用（包括主应用）都会受影响——这不是 bug，是 CSS 天然行为。
为什么 html/body 样式天然不隔离
浏览器中 html 和 body 是整个文档唯一的根级元素，CSS 作用域机制对它们完全失效。无论你用 CSS Modules、BEM 还是 @scope，都无法限制 body 上的声明只作用于某个子应用。
- 子应用 A 加载了 Ant Design 的
reset.css，重置了body line-height→ 主应用导航栏文字行高错乱 - 子应用 B 设置
html { font-size: 62.5% }用于 rem 计算 → 所有子应用字体基准被强制缩放 - qiankun 的
strictStyleIsolation: true对html/body无效，它只包裹子应用容器节点
如何安全地共享基础样式但避免污染
真正可行的共享不是“复用全局规则”，而是“统一注入 + 显式约束”。关键在于把 html/body 相关样式收归主应用统一管理，子应用禁止直接操作。
- 主应用在
<head>中注入一份最小化的基础样式表，仅含html/body的 reset、font-size、color-scheme 等跨应用一致项 - 子应用通过
document.documentElement.setAttribute('data-subapp', 'xxx')声明身份，主应用样式用[data-subapp] body做条件化覆盖（慎用，仅限必要场景） - 禁止子应用 import 任何含
html或body选择器的第三方 reset 库（如 normalize.css、modern-normalize） - 若必须使用 UI 库全局样式，改用其提供的「无重置」版本（如 Ant Design 的
antd/dist/reset.less替换为antd/dist/antd.min.css）
attributeChangedCallback 无法响应 html/body 属性变更？
html 和 body 不是 Custom Element，无法监听属性变更。想响应主题切换或语言变更，不能靠 attributeChangedCallback，得用更底层机制。
立即学习“前端免费学习笔记（深入）”；
- 监听
document.documentElement的mutation事件（性能差，仅调试用） - 主应用统一维护一个
window.__MICRO_APP_THEME__全局状态，子应用通过 props 或自定义事件订阅 - 用 CSS 自定义属性（
--theme-color）配合:root更新，子应用通过getComputedStyle(document.documentElement)主动读取 - Shadow DOM 子应用无法继承
:root变量，必须显式透传：shadowRoot.host.setAttribute('data-theme', value)，并在 shadow 内用:host([data-theme="dark"]) { ... }
micro-app[name=xxx] 无法作用于 html/body 的根本原因
MicroApp 的样式前缀机制依赖于将子应用 DOM 挂载到 <micro-app> 标签内，但 html 和 body 是该标签的祖先节点，不在其子树中。任何基于容器前缀的选择器（如 micro-app[name=xxx] body）都违反 DOM 层级关系，浏览器直接忽略。
- 不要尝试写
micro-app[name=xxx] html—— 它永远不匹配 - Shadow DOM 也无法包裹
html/body，因为它们不属于 Shadow Root 的合法子节点 - iframe 是唯一能真正隔离
html/body的方案，但会牺牲 DOM 通信和样式继承能力 - 最务实的做法：接受它们的全局性，把控制权交给主应用，子应用只负责局部样式
真正难的不是技术方案，而是团队约定：谁有权修改 html/body，改什么，怎么灰度验证。一旦放开，就没人能收回来。
