`adoptedstylesheets` 是 shadow dom 和全局文档中批量注入 css 的现代标准方式，支持直接赋值一个 `cssstylesheet` 实例数组，无需手动合并或多次调用 `replacesync`。
在现代浏览器（Chrome 73+、Firefox 115+、Safari 17.4+）中，document.adoptedStyleSheets 是一个可写数组，用于将一组 CSSStyleSheet 对象一次性注入到当前文档的样式层中。它专为高性能、无闪屏的样式管理而设计，尤其适用于 Web Components 或需要动态切换主题的场景。
✅ 正确做法：直接赋值样式表数组
你无需将多个 CSS 字符串拼接或反复操作单个 CSSStyleSheet 实例。只要将每个样式块分别解析为独立的 CSSStyleSheet，再统一赋值即可：
// 方式一：通过字符串创建多个样式表（适合内联样式）
const sheet1 = new CSSStyleSheet();
sheet1.replaceSync(`.test { background-color: #fff; } .wow { border: 2px solid red; }`);
const sheet2 = new CSSStyleSheet();
sheet2.replaceSync(`.test2 { background-color: #fff; } .wow2 { border: 2px solid red; }`);
// 一次性全部采用
document.adoptedStyleSheets = [sheet1, sheet2];// 方式二：导入模块化 CSS 文件（推荐，更清晰、可复用）
import firstcss from '../css/first.css' assert { type: 'css' };
import secondcss from '../css/second.css' assert { type: 'css' };
document.adoptedStyleSheets = [firstcss, secondcss];⚠️ 注意：assert { type: 'css' } 是 ES 模块规范中加载 CSS 为 CSSStyleSheet 的标准语法，需服务端支持（如 Vite、Webpack 5+、Node.js 20.10+ 原生支持）。若环境不支持，可用 fetch + CSSStyleSheet().replaceSync() 替代。
❌ 常见误区澄清
- 不要对同一 CSSStyleSheet 多次 replaceSync 或 insertRule 来“追加”不同样式：这会覆盖原有规则，而非叠加。
- 不要用 sheet.insertRule() 直接插入 CSS 文本块：insertRule 仅接受单条规则（如 'div { color: red; }'），且需指定插入位置；多规则字符串需先拆解或改用 replaceSync。
- 避免重复赋值导致样式丢失：document.adoptedStyleSheets = [...document.adoptedStyleSheets, newSheet] 虽语法可行，但易引发竞态或冗余；推荐始终显式构造完整数组并一次性赋值。
✅ 最佳实践建议
- 将样式逻辑按功能/组件拆分为独立 .css 文件，并通过 assert { type: 'css' } 导入，提升可维护性；
- 在框架中（如 Lit、Stencil），优先使用 adoptedStyleSheets 配合静态 static styles = [...]，由底层自动处理；
- 若需动态更新，可重新生成整个数组并重赋值（浏览器会高效 diff 并仅更新变更部分）。
通过这种方式，你既能保持样式隔离性，又能获得比
