绝大多数场景应选 open 模式，便于调试和维护；样式须内置于 Shadow DOM，避免全局污染，慎用 !important，善用 :host 和 :host-context() 实现主题适配与祖先状态检测。
Shadow DOM 的 mode 选 closed 还是 open？
绝大多数场景下，选 open。它允许开发者在 DevTools 中直接 inspect shadow root、调试样式和结构；而 closed 会屏蔽 element.shadowRoot 访问，连 JS 动态注入样式或查找内部节点都得绕路（比如靠 getElementsByClassName 猜路径），实际维护成本远高于“理论隔离强度”。只有极少数对封装性有强审计要求的组件库（如银行级 UI 基建）才考虑 closed，且需配套提供明确的 API 接口暴露必要能力。
样式怎么写才真正不泄漏、也不被外部覆盖？
Shadow DOM 默认不继承外部样式（font-family、color 等 CSS 自带继承属性除外），但仅靠这个不够。关键在三件事：
- 所有样式必须写在 Shadow DOM 内部：用
attachShadow({ mode: 'open' })后，通过shadowRoot.innerHTML注入，或用adoptedStyleSheets（需注意 Safari 17.4+ 才稳定支持） - 避免用全局选择器污染：比如
button { }会匹配所有 button，应加 scope 类名如.my-button button { }或用:host控制宿主元素样式 - 慎用
!important：它可能意外压制宿主页面的合理覆盖需求，尤其当组件被嵌入第三方系统时；更推荐用:host-context(.dark-theme) { }做主题适配
:host 和 :host-context() 到底什么时候用？
:host 只作用于组件自身宿主标签（即自定义元素本身），比如 :host-context() 则检测宿主元素的**祖先链**是否匹配某个 CSS 选择器——这是实现主题透传的核心机制。
常见误用是把 :host-context(.theme-dark) 写成 :host(.theme-dark)，后者只会查 :host-context() 不支持伪类嵌套（如 :host-context(:hover) 无效），也不能跨 shadow boundary 传递状态。
动态更新 Shadow DOM 样式时为什么没生效？
直接修改 shadowRoot.querySelector('style').textContent 是可行的，但容易漏掉两个关键点：
- 若用
innerHTML替换整个，旧 style 标签会被销毁，其中的 CSSOM 规则丢失，浏览器要重新解析——高频更新会导致闪烁或 FOUC - 若用
adoptedStyleSheets，必须确保 sheet 是CSSStyleSheet实例（不能是字符串），且在 Chrome/Firefox 中需用replace()或replaceSync()更新内容，而不是赋值sheet.cssRules - Safari 对动态
adoptedStyleSheets支持较弱，建议 fallback 到+textContent方案，并用requestAnimationFrame节流更新频率
样式隔离不是一劳永逸的事——:host 的边界感、adoptedStyleSheets 的兼容水位、以及主题探测的祖先依赖，每处都藏着运行时才暴露的细节。别只盯着“能不能隔离”，先确认你的组件会在什么上下文里被谁以什么方式嵌入。
