shadow dom样式不生效因默认隔离，需将显式注入shadowroot；外部css无法穿透，可用:host读取css变量或::part()暴露样式钩子。
Shadow DOM里
Shadow DOM默认隔离样式，<style></style>写在shadowRoot里是生效的，但很多人误把样式写在外部HTML或父组件CSS中，结果完全没作用。
常见错误现象：Element.style.color能改，但全局.btn类名对Shadow DOM内元素无效；DevTools里能看到元素，但Computed标签页里查不到预期样式。
- 必须把
<style></style>节点显式append()到shadowRoot，不能靠外部CSS文件“穿透”进来 - 如果用
attachShadow({mode: 'closed'})，连js都拿不到shadowRoot，更别提注入样式 -
@import在Shadow DOM内支持有限，chrome 120+才稳定，建议直接用<link rel="stylesheet">并确保CORS允许
如何复用CSS变量和主题色
Shadow DOM不继承外部CSS变量（--primary-color），但可以主动从宿主元素读取——这是最轻量的主题方案。
使用场景：按钮组件需要响应页面级主题切换，又不想用CSS-in-JS或重复定义变量。
立即学习“前端免费学习笔记（深入）”；
- 在
shadowRoot的<style></style>里用:host { --primary-color: var(--primary-color, #007bff); }兜底 -
:host选择器必须存在，否则var()读不到宿主元素上的变量 - 宿主元素上设
style="--primary-color: red;"，Shadow DOM内color: var(--primary-color)就能实时响应 - 注意兼容性：
:host-context()已废弃，不要用；:host([dark])这类属性匹配是安全的
外部CSS想“穿透”进Shadow DOM怎么办
标准下不允许穿透，但有两个现实可行路径：一是用::slotted()控制插槽内容，二是用part + ::part()暴露局部样式钩子。
常见错误现象：给自定义组件加class="large"，期望放大内部文字，结果毫无反应。
-
::slotted(*)只能作用于<slot></slot>投射进来的节点，对组件内部DOM无效 - 想控制内部按钮大小？得在按钮上加
part="button"，外部写my-component::part(button) { font-size: 1.2em; } -
::part()不支持嵌套选择器，::part(button) span会失效，只能写成::part(button-label)单独暴露 - 所有
part名需在组件文档里明确定义，否则使用者根本不知道能hook什么
构建时提取Shadow DOM样式是否必要
开发期直接innerHTML += '<style>...</style>'够用，但上线前建议提取为独立.css并fetch注入——否则热更新、缓存、压缩都难做。
性能影响：内联样式每次创建实例都重复解析；外部CSS可被浏览器缓存，且支持contenthash。
- 用
import.meta.url配合new URL('./styles.css', import.meta.url)定位资源路径，避免硬编码 - Vite/webpack里
text!./styles.css或raw-loader可读取为字符串，再shadowRoot.innerHTML = '<style>' + cssText + '</style>' - 别用
<link>动态插入——它异步加载，样式可能闪动；fetch().then(css => ...)更可控 - 如果组件被多次实例化，记得只注入一次样式，可用
document.getElementById('my-comp-styles')防重复
Shadow DOM样式隔离不是黑盒，关键在明确边界：哪些该由宿主控制，哪些必须封装在内部。漏掉:host或滥用part，比写错一个useState更容易引发不可见的样式断裂。