Shadow DOM 中响应暗色模式应使用 :host-context(.dark)，它向上匹配祖先链中含 .dark 类的元素（如 <body class="dark">），而非组件自身类；该伪类不支持伪类嵌套、不触发重排，性能优于 JS 监听，且需确保 .dark 在组件挂载前已存在于可遍历的祖先节点上。
Shadow DOM 里怎么响应暗色模式？
靠 :host-context(.dark)，不是 :host(.dark)。前者查祖先链上有没有 .dark 类（比如 <body class="dark"><my-card></my-card></body>），后者只查组件自己带不带这个 class。
常见错误是把主题类写在 wrapper 容器里：<div class="dark"><my-card></my-card></div> —— 这时 :host-context(.dark) 不会匹配，因为 <my-card> 的直接父级是 <div>，但 :host-context() 要求祖先链中存在该选择器，且必须可被 CSS 引擎向上遍历到；而如果 .dark 在 <body> 上，就完全没问题。
-
:host-context()不支持伪类嵌套，比如:host-context(:hover)无效 - 它不触发重排，性能比 JS 监听 class 切换更轻量
- Safari 16.4+、Chrome 90+、Firefox 85+ 均已稳定支持，但旧版 Safari（
怎么让第三方 UI 框架（如 Bootstrap）在 Shadow DOM 里安全运行？
不能把 <link rel="stylesheet"> 直接塞进 shadowRoot.innerHTML，那样样式仍注入全局作用域，污染宿主页面。正确做法是提取 CSS 文本，转成 CSSStyleSheet 实例，再用 adoptedStyleSheets 注入。
示例流程：
- 用
fetch加载 Bootstrap CSS 字符串 - 用
new CSSStyleSheet()创建实例（注意 Safari 17.4+ 才支持replace()动态更新） - 调用
sheet.replace(cssText)写入内容 - 赋值给
shadowRoot.adoptedStyleSheets = [sheet]
关键点：相对路径（如 url(./img.png)）、@import、字体声明等资源引用必须提前代理或内联替换，否则加载失败。
如何用 CSS 变量实现跨环境主题透传？
变量必须设在宿主元素自身上，:root 或 body 上声明的变量进不了 Shadow DOM。例如：<my-button theme="dark"></my-button>，配套 CSS 应写成 my-button[theme="dark"] { --bg: #1e1e1e; }，而不是 body.dark { --bg: #1e1e1e; }。
JS 动态设置也同理：element.style.setProperty('--bg', '#2d2d2d') 才有效；写 document.body.style.setProperty 是徒劳的。
- 所有
var(--x, fallback)都必须带 fallback，否则变量未定义时会回退为transparent或auto，导致布局/颜色异常 -
:host必须写在 shadow 内部的<style>里，用来控制宿主标签自身的边框、圆角、尺寸等外观 - slot 投入的内容不受 shadow 内变量影响，要用
::slotted(p)显式继承 color/font 等可继承属性
为什么本地开发和生产环境样式表现不一致？
多半是 adoptedStyleSheets 兼容性没兜住。Chrome/Firefox 支持良好，但 Safari 17.4 之前不支持 replace()，若你用 sheet.replace(css) 更新主题，Safari 旧版会静默失败，样式卡在初始状态。
规避方案：
- 检测
CSSStyleSheet.prototype.replace是否存在，不存在则 fallback 到innerHTML = '<style>...</style>'替换整个<style>标签 - 避免高频更新样式表，每次
replace()都触发浏览器重新解析 CSSOM，可能引发 FOUC - 构建时预编译多主题 CSS 文件，按需加载对应 sheet，减少运行时逻辑
最易被忽略的是：变量名拼错、作用域挂错位置、fallback 缺失——这三类问题不会报错，只会让样式“看起来没生效”，调试时得逐层检查宿主元素 computed style 中是否真有那个变量。
