Shadow DOM 是唯一能真正切断 HTML 预览中第三方样式污染的原生机制，它在浏览器样式计算阶段跳过跨 boundary 匹配；直接 innerHTML 注入样式会失效，因 <style> 被解析为文本节点而非 CSSOM 规则，须用 createElement('style') 或 CSSStyleSheet + adoptedStyleSheets 安全注入。
Shadow DOM 是唯一能真正切断 HTML 预览中第三方样式污染的原生机制，它不靠命名约定、不靠 !important 权重博弈，而是浏览器在样式计算阶段就跳过跨 boundary 匹配。
为什么直接 innerHTML = '' 会失效
常见错误是把整个结构连同 <style></style> 一起塞进 shadowRoot.innerHTML，例如：shadowRoot.innerHTML = `<div class="card"></div>
<style>.card { border: 1px solid red; }</style>`。这会导致 <style> 标签被当作普通 HTML 解析，不进入 CSSOM，后续 JS 修改规则（如 sheet.cssRules[0].style.borderColor = 'blue'）完全无效，甚至触发 FOUC。
- 浏览器明确拒绝把
innerHTML当作样式注入入口 -
<style>被解析为文本节点，而非样式规则容器 - 动态更新、重排重绘、CSS 变量响应均失效
如何安全注入样式：必须进 CSSOM
样式必须参与 CSSOM 构建，否则无法生效或响应变化。字符串拼接是最常见也最危险的误操作。
- 始终用
document.createElement('style')+textContent+appendChild() - 避免在模板字符串里插值，防止 XSS（尤其含用户输入时）
- 现代方案：用
new CSSStyleSheet()实例 +shadowRoot.adoptedStyleSheets = [sheet]（Chrome 73+ / Safari 16.4+ 支持） - 若需复用公共样式（如基础字体重置），可提前创建
const baseStyles = new CSSStyleSheet()，再统一注入
:host 和 ::slotted() 是唯一合法的跨边界出口
它们不是“增强版选择器”，而是 W3C 规范定义的边界协议接口。其余穿墙方式（/deep/、::ng-deep、>>>）已在 Chrome 120+、Firefox 115+ 中彻底移除。
立即学习“前端免费学习笔记（深入）”；
-
:host只匹配宿主元素自身（如<my-card>这个标签），不能写:host div.title去选内部子元素 -
:host-context(.theme-dark)才能响应<body class="theme-dark"><my-card></my-card></body>这类外部主题 -
::slotted(p)只作用于被<slot></slot>投影进来的顶层<p>，且仅支持可继承属性（color、font-family、line-height、background-color） - 禁止写
::slotted(*)或:host ::slotted(*)—— 行为不一致、不可靠，且违背封装本意
结构维护的关键：宿主元素类型与 attachShadow 时机
Shadow DOM 不是万能容器，挂载失败会导致静默失效或抛 InvalidStateError。
- 只支持挂载到
<div>、<span>、自定义元素（如<cms-block>）等可承载 shadow 的元素；<p>、<img>、<input>等原生替换元素一律不支持 - 宿主元素必须已插入 DOM，不能在
document.createElement('div')后立刻调用attachShadow() - 必须用
{ mode: 'open' }——'closed'下element.shadowRoot恒为null，DevTools 无法 inspect，调试成本陡增 - 若需渲染第三方 HTML 字符串（如 CMS 导出的富文本），必须用
DOMParser解析后手动提取<style>节点并注入，不能直接赋值innerHTML
最容易被忽略的是继承链断裂：用户代理样式（如 <input> 的默认 color）会覆盖 inherit，必须在 :host 上显式声明 font-family: inherit、color: inherit 等，否则文字可能回退到 Times New Roman 或其他 UA 默认值。
