shadow dom 是唯一能从浏览器渲染引擎层面切断第三方样式影响的原生机制，通过隔离 cssom 实现样式封装，而非依赖 !important 或命名约定；必须用 dom 方法注入 style 节点、adoptedstylesheets 安全引入第三方 css，严格限制 :host 和 ::slotted() 的穿透范围，并显式使用 open 模式以保障可维护性。
Shadow DOM 是唯一能从浏览器渲染引擎层面切断第三方样式影响的原生机制，不是靠 !important 或命名约定对抗，而是让外部 CSS 根本不参与内部元素的样式计算。
为什么直接 innerHTML = '' 会失效
常见错误是把含 <style></style> 的 HTML 字符串整体赋给 shadowRoot.innerHTML，例如：
shadowRoot.innerHTML = `<div class="card"></div><style>.card { border: 1px solid red; }</style>`;
这会导致 <style></style> 被当作文本节点解析，不进入 CSSOM，后续 JS 修改 sheet.cssRules[0].style.borderColor 完全无效，甚至触发 FOUC。
- 必须分两步：先注入结构，再用 DOM 方法插入
<style></style>节点 - 始终用
document.createElement('style')+textContent+appendChild() - 禁止在模板字符串中拼接
<style></style>，尤其不能插值变量（XSS 风险）
如何安全注入第三方 CSS（如 Bootstrap、Foundation）
第三方库的 <link rel="stylesheet"> 若直接写进 shadowRoot.innerHTML，会加载到全局 document.head，完全失去隔离意义。
- 用
DOMParser解析 HTML 字符串，提取<style></style>内容和<link>的href - 将 CSS 文本转为
CSSStyleSheet实例，再通过shadowRoot.adoptedStyleSheets = [sheet]注入（注意 Safari 16.4+、Chrome 73+ 才稳定支持） - 对
@import、相对路径（如url(./icon.svg)）、CSS 变量继承断裂等问题，需提前做资源代理或内联替换 - 若必须用
innerHTML替换旧样式，旧<style></style>节点会被销毁，CSSOM 规则丢失，可能引发闪烁
:host 和 ::slotted() 是唯一可控的穿透通道
预览窗口或 CMS 组件常需响应外部主题（如 <div class="theme-dark">）或允许用户传入自定义内容，但穿透必须严格受限。
<ul>
<li>
<code>:host-context(.theme-dark) 检测祖先链 class，用于暗色主题透传；:host(.dark) 是常见误用，它只查宿主自身是否有 class
::slotted(p) 只影响传入 <slot></slot> 的顶层 <p></p> 元素，且仅支持 color、font-family、line-height、background-color 等可继承属性::slotted(*) 或 :host ::slotted(*)——行为不一致，且违背封装原则::slotted() 不该设 margin、display、position
mode: 'open' 是生产环境的合理默认
选 mode: 'closed' 并不能增强隔离能力，反而让 element.shadowRoot 返回 null，调试不可见、测试难覆盖、维护成本陡增。
- 必须显式调用
attachShadow({ mode: 'open' })创建影子根，否则样式边界机制不启用 - 重复调用会抛出
Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached错误，需先检查element.shadowRoot === null - 容器元素本身不应带任何样式，推荐设
style="display: contents;"避免引入额外盒模型 - 所有脚本初始化（如
new Quill()）必须传入shadowRoot作为查找上下文，否则会在全局 document 中找不到目标节点
真正容易被忽略的是继承链重置——比如未显式声明 :host { font-family: inherit; color: inherit; }，用户代理样式（如 <input> 默认 color）就会覆盖继承值，导致文字颜色异常。这不是 bug，是 Shadow DOM 默认行为。
