web components中外部css不生效是设计使然，必须将样式注入shadow root内部；推荐adoptedstylesheets方案，兼容性不足时用innerHTML兜底，并注意css变量需宿主显式定义。
Web Components中直接link引入CSS不生效
Shadow dom默认隔离样式，外部 <link rel="stylesheet"> 或全局 <style></style> 完全不会穿透到 shadow root 内部。这不是 bug，是设计使然。
- 别在 shadow host 外写
.my-button { color: red }试图影响组件内部元素 - 不要把
<link href="theme.css">放在里指望它作用于自定义元素内部 - 真正生效的方式只有一种：把样式注入到 shadow root 本身 —— 无论用
innerHTML、adoptedStyleSheets还是构造时 append
用adoptedStyleSheets复用全局CSS变量和媒体查询
adoptedStyleSheets 是目前最干净的方案，支持 CSSOM、变量继承、动态更新，且能跨多个 shadow root 复用同一份 CSSStyleSheet。
- 必须用
CSSStyleSheet实例，不能传字符串或<style></style>元素节点 - 创建方式推荐
new CSSStyleSheet()+replaceSync()，避免异步加载时序问题 - 注意兼容性：
adoptedStyleSheets在 safari 17.4+ 才稳定支持，旧版需回退到innerHTML注入 - 变量（如
--primary-color）会从 host 继承，但需确保 host 自身定义了该变量，否则 fallback 不触发
const sheet = new CSSStyleSheet(); sheet.replaceSync(`:host { display: block; } .label { color: var(--primary-color, #007bff); }`); this.shadowRoot.adoptedStyleSheets = [sheet];innerHTML注入style标签的兼容兜底写法
当需要支持 Safari 15–17.3 或 firefox 旧版本时，innerHTML 是最稳妥的降级手段，但要注意注入时机和重复问题。
- 务必在
this.attachShadow({ mode: 'open' })之后立即注入，避免渲染闪动 - 每次实例化都重新注入会导致样式重复，建议加 guard：检查
shadowRoot.querySelector('style[data-id="my-comp"]')是否已存在 - 内联
@import不推荐 —— 会触发额外网络请求且无缓存复用，改用构建时合并 CSS - 路径引用（如
url(./icon.svg)）里的相对路径，解析上下文是当前 HTML 文档，不是组件文件位置
this.shadowRoot.innerHTML = ` <style data-id="my-comp"> :host { --gap: 8px; } .item { margin: var(--gap); } </style> <slot></slot> `;scoped属性和CSS Modules不是Web Components原生方案
scoped 是 Vue / Svelte 等框架的编译产物，:scope 伪类也不等于 Shadow DOM 作用域。混淆这两者会导致样式泄漏或失效。
立即学习“前端免费学习笔记（深入）”；
- HTML 原生
<style scoped></style>不存在，浏览器会忽略该属性 -
:host和:host-context()是 Shadow DOM 专用选择器，仅在 shadow root 内有效 - 构建工具生成的哈希类名（如
.Button_kj29d）只是模拟作用域，不提供真正的样式隔离，仍可能被外部 CSS 覆盖 - 如果用了 Lit 或 Stencil，它们的
css模板标签底层仍是注入<style></style>到 shadow root，不是魔法
Shadow DOM 的样式边界是硬隔离，没有“自动穿透”机制。最容易被忽略的是：CSS 变量继承依赖宿主显式声明，而不仅仅是父元素存在；还有 adoptedStyleSheets 在部分旧版 Safari 中静默失败，不报错也不生效 —— 建议加个简单检测逻辑。