Web Components中CSS作用域默认隔离，仅CSS自定义属性、:host和::slotted可穿透Shadow DOM实现样式共享；外部CSS文件无法直接加载，须通过注入或adoptedStyleSheets共享。
Web Components中CSS作用域默认隔离，:host和::slotted是穿透关键
Shadow DOM天然阻断外部样式影响内部节点，也阻止内部样式泄露到外部——这是好事，但共享样式时反而成了障碍。想复用按钮、表单控件的通用视觉规则？不能靠全局.btn类直接生效。
真正能跨组件复用样式的只有三类：CSS自定义属性（--color-primary）、:host选择器控制宿主元素自身、::slotted选择器作用于分发进来的子内容。其他所有普通类名或标签选择器在shadow root里都只对内部节点有效，且不会继承外部样式。
-
:host只能选中当前组件的宿主HTML元素（比如<my-button></my-button>），不能带后代选择器（:host .icon无效） -
::slotted(*)能匹配插槽里的任意节点，但无法深入到那些节点的shadow内部（它只管“一层”） - 自定义属性必须由宿主元素或更高层显式设置，
inherit不适用于shadow边界
用@import或<link rel="stylesheet">引入CSS文件，在shadow root里无效
很多人试过在attachShadow后用document.createElement('link')往shadowRoot里加样式表，结果发现完全不生效——因为Shadow DOM不支持动态<link>加载外部CSS，也不执行@import规则。
唯一可靠的方式是把CSS字符串注入<style></style>标签，并append到shadowRoot中。构建时可以预编译，运行时可用fetch读取文本再插入，但注意CSP策略可能拦截内联<style></style>。
立即学习“前端免费学习笔记（深入）”；
- 用
new CSSStyleSheet()+replaceSync()更现代，但IE和旧版Safari不支持 - Vite/Webpack等工具可通过
?raw导入CSS为字符串，避免手动拼接 - 若多个组件共用同一份CSS字符串，建议缓存
<style></style>节点并复用，避免重复解析
通过adoptedStyleSheets共享CSSStyleSheet实例，性能好但兼容性有缺口
Chrome 73+、Firefox 94+、Safari 15.4+ 支持adoptedStyleSheets，允许把一个CSSStyleSheet对象同时挂载到多个shadow root上。样式变更一次，所有采用它的组件实时响应，比重复插入<style></style>高效得多。
但它不是万能方案：不支持@media或@supports动态重算，也不能用insertRule修改已adopt的sheet（会报错），而且无法与<style></style>混用——一旦用了adoptedStyleSheets，该shadow root的<style></style>标签就失效了。
- 创建sheet必须用
new CSSStyleSheet()，不能从<style></style>克隆 - 多个组件调用
shadowRoot.adoptedStyleSheets = [sharedSheet]即可共享，无需重复赋值 - Safari 15.4之前需回退到
<style></style>注入，可用try/catch检测支持性
第三方UI库（如Shoelace、Lit）的样式共享机制本质仍是CSS变量 + 预置sheet
别被“主题系统”“CSS定制”这些词带偏——它们没突破Shadow DOM的底层限制。Shoelace用adoptedStyleSheets注入基础样式，再靠--sl-color-primary等变量控制颜色；Lit的css模板标签也只是生成字符串注入<style></style>。
如果你自己封装组件库，重点不在“怎么写CSS”，而在“谁来提供变量值”。通常由最外层容器（比如<app-root></app-root>）设置style="--color-brand: #2563eb"，再让所有子组件的:host或div用var(--color-brand)消费——变量链路必须手动打通，没有自动继承。
- 不要指望
html { --x: y }能穿透到shadow内部，必须设在宿主元素或其祖先上 - 组件内部若需fallback值，写成
color: var(--color-text, #333)，否则变量未定义时会失效 - Light DOM中用
class控制布局（如grid、flex），Shadow DOM内只管视觉细节，职责切分清楚才不易冲突
真正难的不是写几行CSS，而是理清变量从哪来、谁负责设置、失效时怎么降级。Shadow DOM不帮你做决定，它只忠实地执行你明确写的规则。
