必须用attachShadow({ mode: 'open' })创建真实隔离边界，而非依赖已弃用的scoped属性或BEM命名；需分步注入样式节点、剥离@keyframes等全局副作用，并禁用closed模式以保障可观察性与可维护性。
用 attachShadow() 创建真实隔离边界，不是加个属性就完事
Shadow DOM 的样式隔离能力是浏览器原生强制执行的，不是靠 class 命名或 scoped 属性（该属性已从 Chrome 120+、Firefox 115+ 移除）。必须显式调用 attachShadow({ mode: 'open' }) 创建 shadow root，否则所有“封装”都是假象。
常见错误包括：
- 直接在宿主元素上写
<style scoped>—— 浏览器忽略，样式照常泄漏 - 用
innerHTML = '<style>...</style>...'赋值到 shadowRoot ——<style>被当作文本节点解析，不进入 CSSOM，动态改样式完全失效 - 忘记设置
:host { font-family: inherit; color: inherit; }—— 文字字体、颜色无法继承，组件看起来“断层”
正确做法是分两步：先创建 shadowRoot，再用 document.createElement('style') 或 new CSSStyleSheet() 注入样式节点。
异步加载插件 HTML/CSS/JS 时，必须全部注入 shadowRoot，不能漏到主文档
插件资源（如远程 HTML 片段）若通过 fetch() 获取，拿到字符串后不能直接 shadowRoot.innerHTML = html。内联 <script> 或 <style> 会逃逸执行环境，破坏沙箱。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 用
DOMParser解析 HTML 字符串，遍历所有<style>和<link rel="stylesheet">，转为<style>标签并appendChild()到shadowRoot -
<script>标签需显式设type="module"或type="text/javascript"，再 append 到shadowRoot—— 这样脚本执行上下文天然受限于 shadow scope - 避免使用
eval()；若必须动态执行，确保代码已过DOMPurify.sanitize()，且无用户输入参与 - HTML 中的
<slot>仅在 Shadow DOM 生效；若插件未挂载到 shadowRoot，<slot>直接被忽略
样式不泄漏 ≠ 全局无副作用，@keyframes 和 @font-face 仍会污染全局
Shadow DOM 隔离的是选择器匹配和样式层叠，但某些 CSS 规则仍会在全局注册，比如 @keyframes、@font-face、:root 变量。一个插件定义了 @keyframes spin，另一个插件或主站也能直接复用它，造成意外交互。
解决办法是加载前剥离或重写：
- 用正则将
@keyframes spin替换为@keyframes plugin-a-spin，确保命名唯一 - 对
@font-face的font-family值加前缀，避免覆盖系统字体声明 - 在 shadowRoot 根节点（如
<div class="root">）上设all: initial，再显式声明需继承的属性（font-family、line-height、color） - 禁用插件使用
document.styleSheets或CSSStyleSheet.insertRule()动态注入全局样式
别用 mode: 'closed'，它不防攻击，只防调试
mode: 'closed' 会让 element.shadowRoot 返回 null，但 DevTools 仍能展开查看结构，反射也能绕过：Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'shadowRoot').get.call(element)。它真正影响的是你自己的调试效率和自动化测试能力。
实际风险反而更高：
- 插件出错时无法 inspect 内部 DOM 或样式，只能靠日志推断问题
- CI 中快照测试失败，因为测试工具查不到 shadow 内容
- 无法用
shadowRoot.querySelector()做状态校验，自愈逻辑失去观测依据 - 一旦插件因外部干扰异常，
closed模式反而阻碍热修复路径
企业级沙箱要的是可观察、可验证、可兜底，不是虚假隐藏。真正起作用的是设计纪律：所有样式进 shadowRoot、所有脚本限 scope、所有事件显式控制 composed 和 bubbles。复杂点不在 Shadow DOM 本身，而在如何让团队一致遵守这些约束。
