document.querySelector('link').sheet不能直接赋给adoptedStyleSheets，因其返回的是未激活的只读样式表，浏览器规范禁止采纳；必须用new CSSStyleSheet()创建、调用replaceSync()注入规则、再整体赋值数组。
能用，但必须走 JS 构造流程，不能直接塞 link.sheet 或字符串。 否则样式不生效，且多数情况下控制台静默失败，排查成本高。
为什么 document.querySelector('link').sheet 不能直接赋给 adoptedStyleSheets
因为 link.sheet 返回的是一个“未激活”的只读样式表实例，浏览器明确拒绝将其 adopt 到 Shadow DOM。这不是兼容性问题，而是规范行为：只有通过 new CSSStyleSheet() 创建、并调用过 replaceSync() 或 replace() 的实例才被认可。
常见错误现象：
- 代码无报错，但组件内样式完全不渲染
- 在 Safari ≤17.3 或 Firefox ≤116 中直接抛
TypeError: Illegal constructor - 样式看似生效，但
:host、::slotted等 Shadow DOM 特有选择器失效
正确创建并注入的三步流程（缺一不可）
必须按顺序执行，跳过任意一步都会导致样式丢失：
立即学习“前端免费学习笔记（深入）”；
- 用
new CSSStyleSheet()创建空实例（注意：IE11 / Safari ≤15.3 不支持，需降级） - 调用
replaceSync()注入 CSS 文本（推荐初始化阶段使用；若需异步加载 CSS 文件，改用replace()并 await） - 将该实例赋值给
shadowRoot.adoptedStyleSheets = [sheet]（注意是数组，不是单个值）
示例：
const sheet = new CSSStyleSheet();
sheet.replaceSync(`:host { display: block; color: var(--text-primary, #333); }`);
const shadow = this.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [sheet];
如何加载外部 CSS 文件（如 theme.css）
不能靠 @import 或 <link> 标签自动加载，必须手动 fetch + 构造：
- 用
fetch('theme.css')获取文本内容，再传给sheet.replaceSync() - 若环境支持 ES 模块 CSS 导入（Vite / Webpack 5+ / Node.js 20.10+），可写
import theme from './theme.css' assert { type: 'css' };，然后直接shadow.adoptedStyleSheets = [theme] - 避免在
connectedCallback里重复创建同一份样式表——应缓存CSSStyleSheet实例，在多个组件间复用
关键细节：CSS 文件中若有 @import、@charset 或 BOM 头，replaceSync() 会直接报错，需提前清洗。
多样式表合并与主题切换场景
adoptedStyleSheets 接收数组，所以多主题/多模块可自然组合：
- 基础样式 + 主题变量 + 媒体查询可拆成多个
CSSStyleSheet实例，一次性赋值 - 切换主题时，只需替换数组内容，例如
shadow.adoptedStyleSheets = [baseSheet, darkThemeSheet]，毫秒级生效 - 切勿写
shadow.adoptedStyleSheets.push(newSheet)—— 它是只写属性，push 不触发更新；必须重新赋整个数组 - 组件卸载时，若需清理内存（尤其高频挂载/销毁场景），应主动从数组中移除对应 sheet，否则实例持续驻留
真正容易被忽略的不是“怎么加”，而是“怎么管”：constructable stylesheets 是 JS 对象，生命周期得自己负责。
