Shadow DOM 实现样式彻底隔离需依赖浏览器原生机制：必须用 attachShadow() 创建影子根，样式须注入 shadowRoot 内部，仅 :host 和 ::slotted 支持有限穿透，外部 CSS 无法进入、内部 CSS 不会泄露。
直接用 class 名写样式、靠加载顺序“赌”谁赢，根本挡不住样式穿透——真正可控的结构划分只有一条主线：按作用域边界切分 DOM 层级，而非按功能或文件组织代码。
HTML 容器必须带唯一 ID 且作为所有样式前缀锚点
不加 ID 的容器等于裸奔。哪怕用了 BEM 或 CSS Modules，只要没把样式限定在某个可识别的 DOM 上下文里，第三方样式（比如宿主页面的 body * { font-size: 12px }）就会穿透进来。
- ID 必须全局唯一，推荐生成方式：
id="widget-<strong>sha256</strong>(src + timestamp)"，不能手写id="my-app" - 所有子元素样式必须以该 ID 为前缀，例如：
#widget-abc123 .btn，而不是单独写.btn - 不要依赖
data-subapp等属性自动隔离——它只是标记，不是作用域开关；没配合构建时重写或运行时注入，就等于没写 - 如果用 qiankun 或 MicroApp，确认
strictStyleIsolation: true已开启，它会自动给你加data-qiankun并重写样式规则
内联 <style> 标签必须剥离并转为 CSSStyleSheet
直接往 innerHTML 里塞含 <style> 的 HTML 字符串，<style> 会漏到全局，污染整个页面。这不是“不小心”，是浏览器标准行为。
- 用
DOMParser解析字符串：const doc = new DOMParser().parseFromString(htmlString, 'text/html') - 提取所有
<style>节点的textContent，再用new CSSStyleSheet()构造实例 - 通过
shadowRoot.adoptedStyleSheets = [sheet]注入（Shadow DOM 场景），或document.adoptedStyleSheets（Light DOM fallback） - 禁止使用
shadowRoot.innerHTML = htmlString—— 内联<style>会被丢弃，<script>在全局执行，XSS 风险高
attachShadow({ mode: 'closed' }) 必须在 constructor 中调用
延迟到 connectedCallback 或更晚，DOM 已渲染、CSS 已计算完毕，污染已发生，无法回滚。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
customElements.define('my-widget', class extends HTMLElement { connectedCallback() { this.attachShadow(...) } }) - 正确写法：在
constructor第一行就调用this.attachShadow({ mode: 'closed' }) -
mode: 'closed'是关键——mode: 'open'下外部仍可通过el.shadowRoot访问，失去封装性 - 第三方 UI 库（如 Ant Design）默认不兼容 Shadow DOM，强行套用会导致
:host、slot、CSS 变量透传异常，需额外适配
第三方样式必须显式重置，不能指望“没加载就不生效”
normalize.css、reset.css、UI 库的全局样式（如 html, body { margin: 0 }）一旦被引入，就立刻影响整个文档树。子应用无法靠“不引用”来免责，因为主应用可能已加载。
- 在子应用根容器上强制重置关键继承属性：
#widget-abc123 { font-size: 16px; line-height: 1.5; color: #333; } - 对
html和body做“假替换”：qiankun 会创建虚拟html/body元素，但你仍需在 Shadow Root 或 ID 前缀下覆盖其样式 - 避免使用通配符重置：
#widget-abc123 * { box-sizing: border-box; }可能干扰 slot 内容，改用明确标签列表 - 注意
@import和url()资源路径——adoptedStyleSheets不支持相对路径，需运行时重写或预加载
最易被忽略的不是怎么写样式，而是谁在什么时候读取了哪些 CSS 规则——DOM 渲染前，浏览器已解析全部 <style> 和 <link>，并建立全局 CSSOM。任何试图“后加载覆盖”的思路，在 Shadow DOM 外都只是概率游戏。
