封闭模式（mode: 'closed'）仅阻止外部访问shadowroot，不提供样式防护；真正起作用的是shadow dom样式作用域机制，需配合禁用exportparts、限制::slotted、重置继承等措施才能防止样式被篡改。
封闭模式（mode: 'closed'）本身并不能防止外部脚本修改组件样式——它只让 element.shadowRoot 返回 null，不提供实质性的样式防护能力。真正起作用的是 Shadow DOM 的**样式作用域机制**，而非 mode 值本身。
封闭模式的真实作用仅限于访问拦截
设置 { mode: 'closed' } 后，外部脚本调用 el.shadowRoot 会得到 null，从而无法直接用 querySelector、appendChild 等方法操作影子树内部节点。但它完全不限制以下行为：
- 浏览器开发者工具仍可展开并查看完整 Shadow DOM 结构（Chrome/Firefox 均支持）
- 外部 CSS 仍可通过
::part()（配合exportparts）或::slotted()影响内容 - 事件监听不受影响：
el.addEventListener('click', ...)依然能捕获内部按钮触发的事件 - DOM 快照（如
el.cloneNode(true)）会完整复制 shadow tree，closed不干预
真正阻止样式被修改的关键措施
样式是否被篡改，取决于你如何组织样式规则和边界控制，与 closed 无关。必须配合以下做法：
-
避免在 shadowRoot 中使用
<style></style>标签 +innerHTML：这会导致样式无法参与 CSSOM，动态更新失效；应使用appendChild(document.createElement('style'))或CSSStyleSheetAPI -
禁用样式穿透通道：不声明
exportparts，不暴露::part()接口；不用::slotted(*)全局接管，只对明确需要透出的内容用窄范围选择器（如::slotted(.label)） -
限制宿主样式响应范围：用
:host([disabled])响应属性，而不用:host-context(body.theme-dark)这类宽泛上下文，避免意外匹配 -
重置继承属性：Shadow DOM 不自动继承
font-family、color等，需显式设为inherit或定义默认值，防止父级样式“悄悄渗透”
外部脚本绕过 closed 的常见方式及应对
即使用了 closed，有经验的脚本仍可能间接干预样式：
-
document.querySelectorAll('my-button')可定位宿主元素，再通过自定义事件或公开方法触发内部逻辑 - 注入全局 CSS 规则（如
my-button::part(control) { display: none; }），前提是组件暴露了exportparts="control" - 监听
slotchange或animationstart等事件，推测内部结构后做响应式样式覆盖
因此，安全策略应聚焦于最小化接口暴露：只提供必要方法（如 setTheme(theme)），所有样式变更由组件内部统一管理，不依赖外部写入。
开发与测试中的现实取舍
closed 模式在 Jest + jsdom 中根本不可用（jsdom 不实现该特性），导致开发时用 open、测试时却无法验证真实行为。更可行的做法是：
- 统一使用
mode: 'open'，靠代码审查和 API 设计保障封装性 - 用
composed: false控制事件冒泡范围，比依赖closed更可靠 - 在 CI 中用 Playwright 做端到端验证，真实环境运行
closed行为
样式隔离强度，最终取决于你是否切断所有可被利用的样式钩子，而不是是否把 shadowRoot 设为 null。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
