html entry 模式下子应用资源路径必须为绝对url，因fetch拉取后执行时base为主应用域名，相对路径（如./main.js）会导致404；需配置publicpath为完整协议域名或运行时重写src/href，且domparser解析后须逐节点注入script/style，禁用innerhtml直接挂载以防沙箱逃逸。
HTML Entry 模式下子应用资源路径必须是绝对的
fetch 拉取到的子应用 index.html 中，所有 script 和 link 的 src、href 必须为绝对 URL，否则主应用加载时会 404。相对路径（如 ./main.js）在子应用独立运行时没问题，但被主应用 fetch 后执行时，当前 base 是主应用域名，不是子应用构建时的 public 路径。
常见错误现象：Failed to load resource: the server responded with a status of 404 ()，且控制台显示请求地址拼错了（比如 https://main.com/./main.js）。
- 构建阶段：子应用 Webpack 配置需设
publicPath: 'https://sub.example.com/'（不能是'auto'或'./'） - 运行时兜底：主应用可在解析 HTML 前重写所有
src/href属性，用正则或 DOMParser 提取后补全协议+域名 - 避免内联脚本直接操作
window—— 如<script>window.myLib = {...}</script>会跳过沙箱，污染全局
DOMParser 解析后不能直接 innerHTML 挂载
拿到 index.html 字符串后，必须用 DOMParser 解析，再提取 body.innerHTML 挂载到容器中。直接 container.innerHTML = htmlString 会导致内联 <style></style> 和 <script></script> 逃逸到全局作用域，样式污染、脚本执行失控。
关键点在于：浏览器对 innerHTML 的解析不经过沙箱，也不触发样式隔离逻辑；而 DOMParser 返回的是标准 Document 对象，后续可逐节点处理。
-
DOMParser解析后，doc.body是干净的 DOM 片段，不含原始 HTML 中的执行上下文 - 所有
<style></style>标签内容应提取出来，转为CSSStyleSheet实例，再通过shadowRoot.adoptedStyleSheets注入（若用 Shadow DOM） - 所有
<script></script>标签必须拦截：外部src动态创建<script></script>并注入沙箱；内联脚本需用Function构造器在重绑定this/window/document的环境中执行
样式卸载靠 DOM 移除，不是手动删 style 标签
HTML Entry 模式下，样式隔离的核心机制是“挂载即注入，卸载即销毁”——子应用卸载时，主应用把整个子应用根节点（含所有动态插入的 <style></style>、<link>）一并从 DOM 中移除。浏览器收到 DOM 删除指令后，自动重建 CSSOM，原样式立即失效。
这比遍历所有 style 标签再 remove() 更可靠，也无需依赖 adoptedStyleSheets 兼容性。
- 前提是子应用所有样式资源都必须挂载在子应用根节点下：不能有
document.head.appendChild(style)这类操作 - 第三方组件库（如 Ant Design 弹窗）默认挂载到
document.body，必须显式传getContainer={() => container}限定范围 - 子应用 HTML 中的全局样式（如
body { margin: 0 }）仍会生效，需配合样式快照或预处理剔除
Shadow DOM + JS 沙箱才是生产级组合
仅用 Shadow DOM 不解决 JS 隔离，仅用 JS 沙箱不解决样式逃逸。二者必须配合：Shadow DOM 管样式边界，JS 沙箱管执行上下文。单独用 iframe 虽然 JS 和样式都隔离，但内存开销大、通信成本高、iOS Safari 渲染不稳定。
实操中最大陷阱是 mode: 'open' —— 它允许外部脚本通过 el.shadowRoot 直接篡改内部 DOM 和样式表，等于把隔离墙开了扇门。
- 必须用
attachShadow({ mode: 'closed' })，CI/CD 流水线应强制校验 -
closed模式下shadowRoot返回null，但可通过console.dir(el)在 DevTools 查看#shadow-root - 所有子应用资源（CSS、JS、图片）必须经主应用代理加载，不能让子应用自己调用
fetch或document.write
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
