在shadow dom中完全失效，因浏览器主动忽略其请求、解析与应用；唯一合规方式是通过cssstylesheet配合adoptedstylesheets注入。
直接用 <link rel="stylesheet"> 往 Shadow DOM 里塞外部 CSS，样式根本不会生效——这不是你写错了路径，而是浏览器压根不处理它。
为什么 <link> 在 Shadow DOM 中完全失效
Shadow DOM 的样式隔离机制会主动忽略所有插入其中的 <link> 标签：不发起请求、不解析规则、不应用样式。哪怕你在 <code>shadowRoot.innerHTML 里写了 <link href="theme.css">，控制台也不会报错，但 computed styles 里查不到任何对应规则。
- 动态创建
<link>并append到 shadow root 同样无效——它只是个挂载失败的 DOM 节点 -
@import在 shadow 内部<style></style>中引用外部文件，也会被拦截 - 根本原因不是“加载慢”，而是浏览器明确拒绝该通道——
adoptedStyleSheets才是唯一被规范认可的注入入口
怎么用 CSSStyleSheet 加载并复用外部 CSS
核心流程是三步：获取 CSS 文本 → 构造 CSSStyleSheet 实例 → 挂载到 adoptedStyleSheets。关键在于，你得自己发起请求并把内容喂给 sheet。
- 用
fetch()获取 CSS 字符串（注意设置headers: { 'Accept': 'text/css' }避免 MIME 类型错误） - 调用
sheet.replaceSync(cssText)注入，不是insertRule——后者只适合单条规则，且无法处理@media、@keyframes等完整语法 - 多个组件实例可共享同一个
sheet对象：shadowRoot.adoptedStyleSheets = [sharedSheet] - 示例：
const sheet = new CSSStyleSheet(); fetch('theme.css') .then(r => r.text()) .then(css => sheet.replaceSync(css)) .then(() => { shadowRoot.adoptedStyleSheets = [sheet]; });
用 import 语句导入 CSS Module 的注意事项
Native CSS Modules（import styleSheet from './style.css' assert { type: 'css' };）在 Chrome 93+/Firefox 117+/Safari 17.4+ 可用，但它返回的是一个 CSSStyleSheet 实例，仍需手动挂载。
- 不能直接当普通 JS 模块用：
styleSheet.toString()返回空字符串，必须通过adoptedStyleSheets注入 - 模块路径必须是相对或绝对 URL，不支持动态拼接（
import(`${path}.css`)会报错） - 如果服务端未正确返回
Content-Type: text/css，Chrome 会静默失败，Firefox 报TypeError: Import assertion type "css" is not supported - 示例：
import styleSheet from './base.css' assert { type: 'css' }; shadowRoot.adoptedStyleSheets = [styleSheet];
容易被忽略的生命周期管理
CSSStyleSheet 是 JS 对象，不会自动销毁。组件频繁挂载/卸载时，若不清理 adoptedStyleSheets 引用，旧 sheet 会持续驻留内存，尤其在单页应用中易造成泄漏。
- 组件卸载时应清空：
shadowRoot.adoptedStyleSheets = [] - 若使用全局缓存的 sheet（如主题 sheet），不要在卸载时
delete或null它，只需从当前 root 移除引用 - 没有 polyfill 能真正模拟
adoptedStyleSheets的复用能力；Safari 17.3 及更早版本只能降级为shadowRoot.innerHTML += '<style>...</style>'，但会失去跨实例共享和同步注入特性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
