html本身不支持微前端组件加载，必须靠js协调；主应用通过fetch拉取子应用index.html，再用domparser解析提取script、style和template，由js控制挂载/卸载，缺失mount/unmount等生命周期函数将导致typeerror报错。
HTML本身不支持微前端组件加载，必须靠JS协调
HTML 文件只是静态载体，不能“实现”微前端。所谓“用 HTML 加载组件”，实际是主应用用 fetch 拉取子应用的 index.html，再用 DOMParser 解析提取 script、style 和 template，最后由 JS 控制挂载/卸载。没 JS 生命周期函数（mount/unmount），HTML 再规范也白搭——常见报错就是 TypeError: app.mount is not a function。
fetch + DOMParser 是 HTML Entry 的标准解析路径
直接 innerHTML = htmlString 会跳过沙箱、逃逸样式、执行失控。必须走标准解析流程：
- 用
DOMParser解析返回的 HTML 字符串，得到干净的Document对象 - 从
doc.head提取所有link[rel="stylesheet"]和style，重写其中url(./xxx)路径为绝对地址 - 从
doc.body提取innerHTML作为渲染模板，挂载到指定容器节点 - 遍历
doc.head中的script标签：外链的用new URL(src, response.url)补全地址后动态创建script元素；内联的交由沙箱（如 qiankun 的execScripts）执行
子应用 HTML 中的资源路径必须绝对化
相对路径（如 src="./main.js"）在主应用上下文中会以主域名拼接，大概率 404。错误现象常是控制台报 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 前，用正则或
DOMParser遍历所有script[src]、link[href]、img[src]，补全协议+域名 - 禁止子应用在 HTML 中写
document.write或直接赋值window.xxx，这类内联脚本会绕过沙箱污染全局
样式隔离依赖 DOM 移除，但动态插入必须拦截
HTML Entry 模式下，卸载时删掉整个子应用根节点，浏览器自动重建 CSSOM，初始加载的样式自然失效——这是它“天然支持样式卸载”的原因。但以下情况会逃逸：
- 子应用运行时调用
document.head.appendChild(document.createElement('style'))，该标签不在容器内，卸载不清理 - Ant Design 等组件库的弹窗默认挂载到
document.body，样式脱离容器 → 必须显式传入getContainer: () => container - HTML 中有全局作用的
style（如body { margin: 0 }）→ 开启styleIsolation: 'scoped'或手动做样式快照（记录document.styleSheets列表，卸载后恢复）
真正难的不是解析 HTML，而是确保所有动态行为都被约束在容器边界内——包括第三方库的副作用、开发者手写的 document.head 操作、以及那些没被 DOMParser 捕获的 runtime 注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
