Shadow DOM 中媒体查询需显式注入，外部样式无效；:host-context() 是响应外部环境的唯一方式；栅格布局须显式声明 display；旧版浏览器需兼容语法，动态更新推荐 replaceSync()。
Shadow DOM 中的媒体查询不会自动继承或穿透，必须显式注入到 shadow root 内部才能生效。外部 `` 或 `
媒体查询必须随样式一起注入 shadow root
浏览器为每个 shadow root 构建独立的 CSSOM，媒体查询只有被加载进该 CSSOM 才会参与匹配和计算。这意味着：
- 不能靠页面 `` 中已加载的 Bootstrap 或自定义 CSS 文件“顺带”生效
- 需将含 `@media` 的完整样式表（如 `.container { width: 100%; } @media (min-width: 768px) { .container { max-width: 720px; } }`）作为 `CSSStyleSheet` 实例，调用 `adoptedStyleSheets` 注入
- 若用 `innerHTML` 注入 `
:host-context() 是响应外部环境的关键桥梁
当需要根据 light DOM 状态（如 `
` 或系统偏好）动态调整 shadow 内样式时，`:host-context()` 是唯一规范支持的方式：- `
` 在 `` 下，可用 `:host-context(.theme-dark) { --bg: #1a1a1a; }` 设置变量 - 配合 `@media (prefers-color-scheme: dark)`，可写成 `:host-context(.theme-dark) @media (prefers-color-scheme: dark) { ... }` 实现双重条件匹配
- 注意：`:host-context()` 只匹配宿主元素的祖先链，不支持深层嵌套选择器（如 `.theme-dark section`）
栅格与响应式布局需显式声明容器行为
Bootstrap 类如 `.row`、`.col` 依赖 `display: flex` 或 `display: grid`，而 shadow 内元素默认不继承这些 display 值。即使媒体查询生效，若容器未设 `display`，布局仍会坍塌：
- 务必在注入的样式中显式设置 `:host { display: block; }` 或 `:host(.row) { display: flex; }`
- 响应式栅格类（如 `.d-none`, `.d-md-block`）需连同对应 `@media` 规则一并注入，不能只复制类名
- 避免依赖用户代理样式——例如 `` 在 shadow 中不会自动获得 flex 子项行为，必须靠注入的 CSS 显式定义
兼容性兜底与动态更新建议
旧版 Safari（
- 用 `shadowRoot.innerHTML = ''` 注入，但要加 `data-id` 防重复
- 媒体查询中的 `width >= 768px` 等现代语法在部分旧引擎中不识别，优先使用 `(min-width: 768px)`
- 动态切换主题时，不要替换整个 `adoptedStyleSheets` 数组，而是复用已有 `CSSStyleSheet` 并调用 `replaceSync()` 更新内容，保证媒体查询重匹配
