Shadow DOM 通过作用域隔离实现样式封装，无需BEM等命名约定；外部CSS无法穿透，内部样式不泄露，仅:host和::slotted()可合法跨边界，继承属性如font-family可能透入但可覆盖。
Shadow DOM 本身不依赖“命名空间”机制，它靠的是作用域隔离——样式天然只在 shadow root 内生效，外部 CSS 选不到内部元素，内部样式也出不去。所以“独立样式命名空间”这个说法容易误导：你不需要手动加前缀、也不靠类名拼接来模拟隔离，而是直接用 attachShadow 切断作用域。
为什么不用写 .my-button__title 这类 BEM 命名？
因为 Shadow DOM 的样式默认就是私有的：button 在 shadow 内部定义的样式，不会匹配页面其他 button；反过来，页面里写的 button { color: red } 也影响不到 shadow 里的 button。
- 类名冲突不再是个问题：你可以放心用
header、content、close这类通用名，无需加组件前缀 - 全局 reset.css 或第三方框架（如 Bootstrap）无法穿透进来，除非显式使用
:host或::slotted - 继承属性（如
font-family、color）仍会透入，这是浏览器默认行为，不是“泄漏”，但可被内部样式覆盖
如何让:host 正确响应宿主状态？
:host 是唯一能直接控制自定义元素自身样式的伪类，但它不支持复合选择器（如 :host(.disabled:hover) 必须拆成两个规则），且不能嵌套伪类。
- 正确写法：
:host([disabled]) { opacity: 0.5; }—— 基于属性 - 正确写法：
:host(.dark) { --bg: #111; }—— 基于 class，但仅当 class 直接写在宿主标签上才生效 - 错误写法：
:host(:hover)或:host(.theme-dark .my-button)—— 后者语法无效，前者在部分浏览器中不可靠 - 要响应祖先主题，必须用
:host-context(.dark-theme)，它查的是宿主元素的任意祖先是否含该 class
动态注入样式时，textContent 替换为啥有时不生效？
直接改 shadowRoot.querySelector('style').textContent 看似简单，但有隐藏陷阱：
- 如果旧
<style>被整个替换（比如用innerHTML = newHTML），浏览器会销毁旧 CSSOM 规则，重解析新样式，可能造成 FOUC（闪屏） - 若用
adoptedStyleSheets，必须传CSSStyleSheet实例，不能传字符串；Chrome/Firefox 需调用replace()或replaceSync()更新内容，直接赋值sheet.replace = newCSS无效 - 推荐做法：保留一个
<style id="theme-style">标签，只更新其textContent，避免 DOM 重建
closed 模式真能增强“命名空间安全性”吗？
不能。模式选 closed 不影响样式作用域，只控制 JS 访问权限 —— element.shadowRoot 返回 null，但样式隔离效果和 open 完全一致。
-
closed导致 DevTools 无法 inspect shadow 内容，调试时只能靠 console.log 或打补丁式注入 - 想阻止外部篡改？靠的是设计契约，不是
closed—— 真正需要防护的场景（如金融级组件库），应提供明确 API（如setTheme()），而非隐藏 DOM - 99% 的项目用
open更实际：样式隔离已由浏览器保证，调试便利性远胜那点“理论安全”
真正关键的不是“怎么命名”，而是把样式锁进 shadow root 里。只要没漏掉 adoptedStyleSheets 的兼容处理、没误用 :host 语法、没在外部 <head> 注入同名 CSS，样式就自然独立——这比任何命名约定都可靠。
