Shadow DOM 隔离核心是主动切断样式作用域与 DOM 访问路径：CSS 必须注入 shadow root 而非 document.head，JS 需限定作用域并禁用跨上下文访问，辅以 iframe sandbox、CSP 与 DOMPurify 多层防护。

用 Shadow DOM 解决第三方广告插件对主站样式的污染，核心不是“把广告塞进去就完事”，而是**主动切断样式作用域和 DOM 访问路径**——广告的 CSS 不该进 document.head，广告的 JS 也不该在全局上下文里操作 document.body。

只让广告样式待在它自己的影子里

广告常带 Foundation、Bootstrap 或自定义 reset.css，一旦注入 ，button { margin: 0 } 这类规则会立刻影响全站。正确做法是：所有 和内联 都必须 append 到 shadow root 内部，而不是 document。

• 创建 shadow root 后，用 shadowRoot.appendChild(linkEl) 加载广告依赖的 CSS
• 避免使用 @import 或动态 document.write，这些容易逃逸到全局
• 若广告含内联样式（如
  ），它默认只作用于自身，无需额外处理

  阻止广告脚本“伸手”到主站 DOM

  Shadow DOM 不阻断 JS 执行，广告脚本仍能调用 document.querySelector('header') 并修改它——这不是 Shadow DOM 的失职，而是你没约束执行环境。

  • 广告脚本必须以 <script type="module"></script> 或带 CSP nonce 的方式注入 shadow root，禁止无限制内联执行
  • 若广告 JS 依赖 jQuery 或初始化框架（如 new Foundation()），需显式传入 shadowRoot 作为作用域，例如：Foundation.init(shadowRoot)
  • 禁用广告脚本访问 window.parent 或 top，可通过 iframe + sandbox="allow-scripts" 双重包裹

  关闭边界漏洞：别让隔离形同虚设

  仅用 attachShadow({ mode: 'open' }) 是不够的。开放模式便于调试，但生产环境应配合更严格的控制点。

  • 关键容器务必用 mode: 'closed'，防止外部通过 el.shadowRoot 直接篡改内部结构
  • 所有事件监听默认 composed: true，广告按钮点击仍会冒泡到主站 —— 显式调用 dispatchEvent(new Event('click', { composed: false })) 阻断穿透
  • 用 :host { all: initial; font-family: inherit; color: inherit; } 重置继承属性，避免字体、颜色等意外透出

  单靠 Shadow DOM 不够，必须叠加防御层

  Shadow DOM 是样式与结构隔离的基石，但防不了 XSS、恶意 fetch 或 localStorage 滥用。真正安全需要组合策略：

  • 广告容器外层套 ，锁死 JS 执行上下文
  • 主站设置严格 CSP：script-src 'self' 'nonce-xxx'; style-src 'self'，广告脚本不带匹配 nonce 就不执行
  • 对广告返回的 HTML 做 DOMPurify 净化，移除 <script></script>、、危险属性（如 onerror）