如何使用 adoptedStyleSheets 同时应用多个样式表

`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 并仅更新变更部分）。

通过这种方式，你既能保持样式隔离性，又能获得比