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 } 这类规则会立刻影响全站。正确做法是：所有 <link rel="stylesheet"> 和内联 <style></style> 都必须 append 到 shadow root 内部，而不是 document。
- 创建 shadow root 后，用
shadowRoot.appendChild(linkEl)加载广告依赖的 CSS - 避免使用
@import或动态document.write，这些容易逃逸到全局 - 若广告含内联样式（如
<div style="color:red">），它默认只作用于自身，无需额外处理 <h3>阻止广告脚本“伸手”到主站 DOM</h3> <p>Shadow DOM 不阻断 JS 执行，广告脚本仍能调用 <code>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 滥用。真正安全需要组合策略：
- 广告容器外层套
<iframe sandbox="allow-scripts" srcdoc="..."></iframe>，锁死 JS 执行上下文 - 主站设置严格 CSP：
script-src 'self' 'nonce-xxx'; style-src 'self'，广告脚本不带匹配 nonce 就不执行 - 对广告返回的 HTML 做 DOMPurify 净化，移除
<script></script>、<style></style>、危险属性（如onerror）
- 广告脚本必须以
