微前端网页HTML文档结构的主从合并策略与冲突解决-html教程-PHP中文网

主应用html结构不可被子应用覆盖或合并，document.documentelement和document.body是全局单例，子应用只能向主应用预留的容器节点渲染内容，所有head、body层级操作必须由主应用统一管控。

微前端网页html文档结构的主从合并策略与冲突解决

主应用 HTML 结构不能靠子应用“覆盖”或“补全”

微前端里不存在“HTML 合并”这种操作——document.documentElement 和 document.body 是全局单例，子应用无法新增、替换或接管它们。所谓“主从合并”，本质是主应用预留容器节点，子应用只往指定 div 里渲染内容，其余结构（如、层级样式、meta 标签）仍由主应用完全控制。

常见错误现象包括：

子应用在 mounted 阶段执行 document.title = '子应用'，结果覆盖了主应用标题，且无还原机制
子应用动态插入 <link rel="stylesheet"> 到 document.head，导致全局样式污染
主应用用了 body { margin: 0 }，子应用又加 body { padding: 1rem }，最终生效的是后者（CSS 层叠顺序决定）

实操建议：

主应用应统一管理 <title></title>、<meta>、全局字体/重置样式，并禁止子应用直接操作 document.head 或 document.body
子应用若需修改页面标题，必须通过主应用暴露的 API（如 window.__setPageTitle）回调，由主应用做防抖、权限校验与还原兜底
所有子应用的 <link> 和 <style></style> 必须拦截重写：qiankun 的 modifyPublicPath + getPublicPath 配合运行时样式隔离，MicroApp 的 loadScript 和 loadStyle 钩子可做资源路径修正与 scope 注入

Shadow DOM 容器不是“自动合并”，而是强制隔离边界

把子应用挂进 shadowRoot 并不等于“HTML 合并完成”，它只是划出一块 DOM+CSS+JS 的独立沙箱。关键点在于：shadowRoot.innerHTML = htmlString 是危险操作，会把内联 <style></style> 和 <script></script> 漏出到全局。

真正安全的注入流程必须分三步走：

用 DOMParser 解析 HTML 字符串，分离出所有 <style></style> 节点内容
将每段样式文本转为 CSSStyleSheet 实例（new CSSStyleSheet()），再赋值给 shadowRoot.adoptedStyleSheets
剥离所有 <script src="..."></script>，fetch 后在绑定好 this/window/document 的沙箱中执行；禁止执行内联 <script>console.log(1)</script>

注意：adoptedStyleSheets 不支持 @import 和相对路径（如 url(./icon.png)），这些资源需主应用提前预加载或重写为绝对 URL。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

data-* 属性不是合并开关，只是样式作用域锚点

手动给容器加 data-subapp="a"，本身不会触发任何隔离逻辑。它只是给 CSS 选择器提供一个可写的前缀载体，是否生效，取决于你有没有配套的样式重写机制。

典型误用场景：

子应用写了 .btn { color: red }，主应用加了 div[data-subapp="a"] .btn { color: blue }，但没确保子应用所有样式都经过前缀处理——第三方库（如 Ant Design）的 .ant-btn 依然全局生效
qiankun 开启 strictStyleIsolation: true 后，会在容器上自动加 data-qiankun="sub-app-a"，但如果你子应用用了 @import 引入外部 CSS，这部分规则不会被自动重写

实操建议：

不要手动维护 data-*，优先使用框架原生机制（qiankun 的 experimentalStyleIsolation、MicroApp 的 styleMode: "scoped"）
构建时用 PostCSS 插件（如 postcss-css-namespace）统一加前缀，但需确认所有子应用共用同一套配置，否则前缀不一致就白干
对 url()、@font-face 等资源引用，必须额外做路径重写或改用 base64 内联，否则前缀方案会漏掉