Shadow DOM 本身不支持 CSS 预编译，所谓“预编译”实为在初始化前将已编译的 CSS 字符串或 CSSStyleSheet 实例注入 shadowRoot；必须通过 style.textContent 或 adoptedStyleSheets 主动挂载，而非 import 或 link。
Shadow DOM 里不能“预编译”样式，只能预加载或预注入
Shadow DOM 本身不提供 CSS 预编译（如 Sass/Less 编译成 CSS）能力——它只负责隔离，不参与构建流程。所谓“预编译”，实际是指在组件初始化前，把已编译好的 CSS 字符串或 CSSStyleSheet 实例准备好，再注入到 shadowRoot 中。
常见错误现象：shadowRoot.innerHTML = `<style>…</style>` 导致样式无法动态更新、@import 失效、source map 丢失；用 Webpack/Vite 的 CSS 模块直接 import 进 Shadow DOM 会失败（因为没走 DOM 注入路径）。
- 必须提前将预编译后的 CSS 字符串（如从
.scss构建输出的component.css）读入 JS，再通过document.createElement('style')注入 - 更现代的方式是用
new CSSStyleSheet()创建样式表实例，然后赋给shadowRoot.adoptedStyleSheets（注意：Safari 16.4+、Chrome 73+ 支持，Firefox 96+ 有限支持） - 若用构建工具（Vite/Webpack），需配置 loader 输出字符串而非自动插入
<style>标签；例如 Vite 的import cssString from './style.css?raw' - 避免在
connectedCallback里重复创建相同样式——可缓存CSSStyleSheet实例或检查shadowRoot.querySelector('style')是否已存在
为什么不能直接 import './style.css' 到 Shadow DOM
import 语句由打包器处理，生成的 <style> 标签默认插入到 <head>，对 Shadow DOM 完全无效。浏览器不会把全局 <style> 的规则应用到 shadow tree 内部元素。
使用场景：你在写自定义元素，想复用项目中已有的主题 CSS 文件，但发现颜色没生效。
-
import的 CSS 是全局作用域，Shadow DOM 内部元素根本“看不见”这些规则 - 即使用了
:host { --primary: blue }，也得靠var(--primary)显式引用，不能指望外部 class 自动穿透 - 真正能复用的是 CSS 变量（
--color）、::slotted()和:host-context()，不是选择器本身
adoptedStyleSheets 是最接近“预编译”的方案
adoptedStyleSheets 允许你把一个已解析的 CSSStyleSheet 对象直接挂载到 Shadow Root 上，样式立即生效且支持后续 JS 动态修改（比如切换主题时调用 sheet.replaceSync(newCSS)）。
性能影响：比每次 appendChild(style) 更轻量，避免重复解析；但 Safari 对 replaceSync 支持不稳定，生产环境建议 fallback 到 textContent 更新。
- 必须用
shadowRoot.adoptedStyleSheets = [sheet]，不能用shadowRoot.appendChild(sheet)（CSSStyleSheet不是 Node） - 多个样式表可合并为数组：
shadowRoot.adoptedStyleSheets = [baseSheet, themeSheet] - 若需 SSR 或静态生成，可在服务端把预编译 CSS 写入 HTML 字符串，客户端只做
new CSSStyleSheet().replaceSync(cssText)
:host 和 ::slotted 才是跨边界样式的唯一合法入口
所有“让外部影响 Shadow DOM”的需求，最终都得收束到这两个伪类。它们不是 hack，而是 W3C 规范明确定义的穿透通道。
容易踩的坑：::slotted(*) 在部分浏览器中匹配不可靠；/deep/、::ng-deep、>> 已全部移除，继续用等于放弃 Chrome 120+/Firefox 115+ 兼容性。
-
:host匹配宿主元素自身，支持属性选择器：:host([size="large"]) { font-size: 1.5em; } -
:host-context(.dark)响应祖先节点 class，但仅限于直系祖先（<body class="dark"><my-card></my-card></body>有效） -
::slotted(p)只匹配传入<slot>的顶层<p>，且只继承可继承属性（color、font、line-height等），不支持margin或display
真正麻烦的不是怎么注入样式，而是决定哪些该进 Shadow DOM、哪些该留给外部通过 :host 或变量控制——边界划在哪，比技术实现更影响长期维护成本。
