直接innerhtml会污染主应用样式，因标签逃逸至全局；shadow dom隔离需在constructor中attachshadow，且adoptedstylesheets不支持@import和相对路径，须手动处理路径与资源。
为什么直接 innerHTML 会污染主应用样式
把一段含 <style></style> 的 HTML 字符串塞进 innerHTML，比如 el.innerHTML = '<div>
<style>.btn{color:red}</style>
<button class="btn">OK</button>
</div>'，<style></style> 标签会逃逸到全局 或文档根级，不是“没隔离”，是压根没建立隔离边界。
常见现象包括：
- 子应用的
normalize.css重置了主应用body字体大小 - 两个子应用都定义
.modal-overlay，后加载的覆盖z-index，遮罩失效 - Ant Design 等第三方库的全局样式穿透进来，按钮圆角/边框全乱
attachShadow 必须在 constructor() 中调用
Shadow DOM 隔离生效的前提只有一个：必须在自定义元素的 constructor() 中调用 this.attachShadow({ mode: 'closed' })。如果延迟到 connectedCallback 或更晚，DOM 已渲染、样式已计算，污染不可逆。
实操要点：
-
mode: 'closed'阻止外部 JS 访问 shadowRoot，更安全；调试时可用'open' - 不能用
shadowRoot.innerHTML = htmlString注入带<style></style>或<script></script>的字符串——内联样式漏出，脚本在全局执行，XSS 风险高 - 正确做法是用
DOMParser解析 HTML，提取<style></style>内容，转为CSSStyleSheet实例，再赋给shadowRoot.adoptedStyleSheets
adoptedStyleSheets 的实际限制
adoptedStyleSheets 看起来干净利落，但它不支持 @import 和相对路径资源（如 url(./icon.png)）。这些资源不会自动解析为 shadow root 上下文路径，导致 404 或样式不生效。
必须额外处理：
- 对 CSS 文本做路径重写：把
url(./icon.png)替换为绝对 URL 或 base64 内联 - 预加载关键资源（图片、字体），再注入样式表
- 禁用第三方 CSS 中的
@import，改用<link rel="stylesheet">显式加载
data-* 属性不是隔离机制，只是选择器锚点
手动给容器加 data-subapp="a"，本身不产生任何样式或执行隔离效果。它只是给构建时或运行时的样式重写逻辑提供一个可写的前缀锚点。
真正起效依赖后续步骤：
- 构建阶段：PostCSS 插件遍历所有规则，将
.btn改为[data-subapp="a"] .btn - 运行时：用
shadowRoot.querySelectorAll扫描并重写内联<style></style>内容 - 若只加属性不重写，CSS 依然全局生效，和没加一样
Shadow DOM 是唯一能同时隔离样式、脚本、DOM 和 localStorage 的原生方案，但它的隔离能力不会自动附着在任意 HTML 字符串上——必须主动构造 shadow root、分治注入资源、并绕过浏览器默认的解析陷阱。漏掉任一环节，就退回全局污染状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
