必须用 CSSStyleSheet 实例+replaceSync()两步构造后赋给 adoptedStyleSheets 数组，因 link.sheet 返回未激活只读实例，浏览器强制禁止采纳；正确流程：new CSSStyleSheet()→replaceSync()→赋值为数组。
不能直接赋值 link.sheet 或 CSS 字符串，必须用 CSSStyleSheet 实例 + replaceSync() 两步构造后，再整体赋给 adoptedStyleSheets 数组。
为什么 document.querySelector('link').sheet 会静默失效
因为 link.sheet 返回的是一个“未激活”的只读样式表实例，浏览器规范明确禁止将其采纳进 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 文本（推荐初始化阶段使用；若需异步加载外部文件，改用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实例，一次性赋值 - 主题切换只需替换数组内容，例如
shadowRoot.adoptedStyleSheets = [DARK_THEME]，毫秒级生效 - 真正容易被忽略的是生命周期管理：组件卸载时，若没从
adoptedStyleSheets数组中移除旧sheet，它仍驻留内存，频繁挂载/卸载场景下会累积泄漏
