attachShadow({ mode: 'open' }) 是唯一可靠入口，必须显式调用以启用原生样式边界；其他方案如 @scope、scoped、CSS Modules 均无法阻止第三方 CSS 全局污染。
直接往第三方页面里塞 HTML 模块，不加隔离就等于把样式和脚本裸奔扔进宿主环境——button、h1、.grid 全可能被覆盖或反向污染，CSP 也拦不住 CSS 冲突。唯一靠谱的解法是用 Shadow DOM 封装，不是“可选”，而是当前唯一能真正隔离的原生机制。
为什么 attachShadow({ mode: 'open' }) 是必须项
Shadow DOM 的 mode 参数决定调试与访问能力。'open' 允许 DevTools 查看 shadowRoot 内容、支持 JS 通过 element.shadowRoot 访问内部节点，这对 CMS 集成、组件调试、后续维护至关重要。'closed' 虽看似更“安全”，但实际会阻断所有外部 JS 控制（包括你自己的初始化逻辑），且无法被浏览器开发者工具检查，上线后出问题几乎无法定位。
常见错误：漏写 mode 或误设为 'closed'，导致组件渲染空白、样式不生效、JS 报 Cannot read property 'shadowRoot' of null。
- 必须显式声明
{ mode: 'open' }，不能省略 -
shadowRoot返回 null？先确认容器元素已挂载（不要在DOMContentLoaded前执行） - 不要用
document.createElement('template')后再attachShadow——模板本身不参与 DOM 渲染，应直接操作shadowRoot
link 和 style 必须注入到 shadowRoot 内部
所有依赖资源（Foundation、Font Awesome、自定义 CSS）必须作为子节点添加到 shadowRoot，而非全局 。一旦放进全局，就失去作用域边界，.button 仍会污染宿主。
立即学习“前端免费学习笔记（深入）”；
典型错误现象：组件按钮样式正常，但宿主页面所有 button 变粗/变色；或图标显示为方块（Font Awesome 字体未加载到 shadow 内）。
- 用
shadowRoot.appendChild(linkEl)，不是document.head.appendChild - 避免内联
<style></style>标签——它虽在 shadow 内，但若含:host或::slotted外部穿透规则，易引发意外泄漏 - CDN 资源加载失败时，
shadowRoot不会报错，需监听link.onload/link.onerror做 fallback
动态内容插入必须绕过 innerHTML 直接操作 shadowRoot
哪怕只是渲染一个用户昵称，如果用 shadowRoot.innerHTML = '<div>' + unsafe + '</div>'，照样触发 XSS。Shadow DOM 提供隔离，但不提供自动转义。
正确路径只有两条：textContent（纯文本）或 createElement + appendChild（结构化内容）。任何字符串拼接都危险。
- 用户输入进
shadowRoot？一律走el.textContent = userInput - 需要加 class 或事件？用
const span = document.createElement('span'); span.className = 'name'; span.textContent = userInput; shadowRoot.appendChild(span); - 禁止使用
insertAdjacentHTML、document.write、eval，它们无视 shadow 边界 - 富文本场景？先用
DOMPurify.sanitize(htmlString, { ALLOWED_TAGS: ['p', 'br', 'strong'] })，再塞进shadowRoot.innerHTML——这是唯一可妥协的例外，但必须白名单严格
CSP 与 Shadow DOM 的关系不是叠加，而是分工
CSP 管的是“哪些资源能加载、哪些脚本能执行”，Shadow DOM 管的是“哪些样式和 DOM 能泄露”。两者不互替，但也不重叠防护。比如 CSP 禁了 'unsafe-inline'，但无法阻止 Foundation 的 .grid-container 把宿主页面撑爆；Shadow DOM 隔离了样式，但挡不住 fetch() 泄露 Cookie（若组件内 JS 有漏洞）。
最容易被忽略的点：CSP 的 style-src 和 font-src 必须包含你所用的 CDN 域名，否则 Font Awesome 图标、自定义字体全失效，且错误静默——浏览器只丢请求，不报错。
Content-Security-Policy: default-src 'self'; style-src 'self' https://cdnjs.cloudflare.com; font-src https://cdnjs.cloudflare.com;- 不要在 meta 标签里写 CSP——部分 CMS（如 Shopify）会过滤或覆盖
http-equiv，优先走服务器响应头 - Shadow DOM 内部的
script标签仍受 CSP 约束，所以外部 CDN 的 JS 也要列在script-src里
