Shadow DOM 不支持直接引用外部 CSS 文件，须通过 constructable stylesheets 显式注入；可借助 :host 读取宿主 CSS 变量实现主题透传，并用 ::part() 暴露定制钩子，禁用已废弃的 /deep/ 等非标准穿透方式。
Shadow DOM 本身不支持直接引用外部 CSS 文件（如 或 @import），这是浏览器强制执行的样式隔离机制，不是限制能被绕过，而是设计使然。要在隔离前提下接入外部设计规范（如 Bootstrap、Material Design、或公司统一 UI 套件），必须通过合法、可维护、且符合标准的方式将样式“显式注入”到 shadow root 的 CSSOM 中。
用 constructable stylesheets 加载并挂载外部 CSS
这是现代、推荐、且唯一被规范认可的跨 boundary 引入外部样式的路径：
- 通过
fetch()获取 CSS 文本内容，再用new CSSStyleSheet()构造样式表对象 - 调用
sheet.replaceSync(cssText)加载规则（注意：需确保 CORS 允许） - 将构造好的 sheet 写入
shadowRoot.adoptedStyleSheets = [sheet] - 该方式支持复用（同一 sheet 可被多个 shadow root 共享）、动态更新（
replaceSync或replace()）、以及与 CSS 变量协同
通过 :host 读取并响应外部 CSS 自定义属性
设计规范常通过 CSS 变量（--primary-color、--spacing-md 等）暴露配置点。Shadow DOM 虽不继承这些变量，但可通过 :host 主动读取宿主元素上的值：
- 在 shadow 内
中写：:host { --primary: var(--primary-color, #0066cc); } - 后续内部规则即可使用
color: var(--primary)，实现主题透传 - 宿主元素上设
- 注意：
:host必须存在，否则var()无法向上查找；:host-context()已废弃，不要依赖
用 ::part() + exportparts 暴露可控样式钩子
当设计规范要求定制内部某一块（如按钮图标、输入框前缀），又不想破坏封装时，应主动暴露 part 名称：
- 在 shadow 内部给目标元素添加
part="icon"或exportparts="icon: btn-icon" - 外部使用者即可写：
my-button::part(icon) { color: var(--accent); } -
::part()是 W3C 标准，Chrome 98+ / Firefox 92+ / Safari 15.4+ 全面支持 - 不支持嵌套（如
::part(icon) span无效），每个可定制区域需单独命名并文档化
避免已淘汰或破坏隔离的“穿墙”手段
以下方式在当前主流浏览器（Chrome 120+、Firefox 115+、Safari 17+）中已失效或不合规：
-
/deep/、::ng-deep、>>>：非标准 hack，已被移除，继续使用会导致样式完全不生效 - 把
直接写进shadowRoot.innerHTML：标签会被解析为普通节点，CSS 不加载，也不进 CSSOM - 用
innerHTML = ''注入样式：被当作文本，无法参与样式计算，JS 动态修改也无效 -
::slotted(*)全局接管插槽内容：违背 slot 设计本意，不可靠，且仅支持可继承属性（不能改display或margin）
