沙箱穿透导致html代码质量失控，因其破坏html语义约束与校验能力：按钮失语义、表单控件失效、dom节点逃逸；需从domparser解析阶段介入，隔离样式、脚本、id及base路径；shadow dom注入须满足克隆模板、剥离内联事件、adoptedstylesheets规范；vite需postcss前缀+禁用css拆分，第三方库须命名空间化。
为什么沙箱穿透会导致HTML代码质量失控
沙箱穿透不是“样式没加前缀”这种表面问题，而是HTML结构本身失去语义约束和校验能力。当子应用的<button></button>被主应用的.btn { display: inline-block }覆盖时，它已不是按钮，只是个带文字的盒子；当<input type="date">因父级font-size: 12px缩到看不见，交互逻辑就彻底失效。更隐蔽的是DOM节点逃逸：子应用用document.getElementById('modal')查到的可能是主应用的弹窗，而非自己挂载的。
HTML结构隔离必须从解析阶段开始控制
不能等子应用HTML字符串进来再处理——此时<style></style>已注入，<script></script>已在全局执行，DOM树也已完成级联渲染。真正可控的起点是DOMParser解析：
-
DOMParser解析后，立即遍历所有<style></style>节点，提取CSS文本，丢弃原始标签 - 对所有
<script></script>节点，禁止textContent直接执行，改用new Function()在沙箱上下文里调用（绑定this为当前shadowRoot.ownerDocument） - 对所有
id属性，统一替换为data-id并生成唯一值（如data-id="subapp-a-1720011300-abc"），避免getElementById跨域误查 - 对
<base href>标签，必须重写为子应用实际部署路径，否则<img src="./icon.png">会404
Shadow DOM下HTML片段注入的三个硬性条件
只调用attachShadow({ mode: 'closed' })还不够，以下三点缺一不可：
- 必须用
document.importNode(tmpl.content, true)克隆模板，cloneNode(true)会丢失<select></select>选中态、<textarea></textarea>内容、<input checked>状态 - 注入前必须剥离所有内联事件处理器（如
onclick="alert(1)"），改用addEventListener绑定到shadowRoot内节点 -
adoptedStyleSheets只能注入CSSStyleSheet实例，不支持@import或相对路径url(./bg.png)，这些资源需提前fetch并转为data URL或绝对路径
Vite子应用HTML注入时的构建时陷阱
qiankun的experimentalStyleIsolation: true对Vite无效，因为Vite默认把CSS打成独立<link rel="stylesheet">插入，根本没经过沙箱拦截。必须配合PostCSS插件做两件事：
- 用
postcss-prefix-selector将.btn重写为[data-subapp="vite-app"] .btn，且该data属性必须由框架在挂载容器上自动添加（手动加无效） - 禁用Vite的
build.cssCodeSplit，强制CSS合并进JS bundle，否则分离的CSS文件会绕过前缀重写逻辑 - 第三方库如Element Plus必须用命名空间方案（
$namespace: 'ep'），否则.el-button类名仍会全局生效
真正难的不是加前缀，而是确保所有HTML节点都在同一作用域链里——一旦<dialog></dialog>或<tooltip></tooltip>被挂到document.body，它就脱离了Shadow DOM边界，样式和事件监听全部失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
