如何使用adoptedStyleSheets添加多个样式表？实现方法与疑问解答

你当前的代码存在问题：sheet.insertRule(styles2) 无法正常工作，因为insertRule()要求传入单个CSS规则字符串（比如.test2 { background-color: #fff; }），而不是包含多个规则的整段样式文本，直接传入styles2会抛出语法错误。

不需要调用两次replaceSync——因为replaceSync会替换整个样式表的内容，第二次调用会完全覆盖第一次的结果。下面是几种正确的实现方式：

方法1：合并样式字符串后一次性替换 #

将多个样式块合并成一个字符串，用replaceSync一次性写入样式表，是最简洁的实现方式：

const sheet = new CSSStyleSheet();
// 合并两个样式字符串
sheet.replaceSync(styles1 + styles2);
// 添加到文档的adopted样式表列表
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

方法2：创建多个CSSStyleSheet实例分别管理 #

如果需要分开管理不同的样式块，可以创建多个样式表实例，再将它们全部添加到adoptedStyleSheets数组中：

const sheet1 = new CSSStyleSheet();
sheet1.replaceSync(styles1);

const sheet2 = new CSSStyleSheet();
sheet2.replaceSync(styles2);

// 将两个样式表都加入文档的adopted列表
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet1, sheet2];

方法3：拆分规则后逐个插入（适合精细控制场景） #

如果必须使用insertRule，需要先把多规则的字符串拆分成单个规则，再逐个插入：

const sheet = new CSSStyleSheet();
sheet.replaceSync(styles1);

// 简单拆分styles2为单个规则（复杂样式需更鲁棒的解析逻辑）
const rules = styles2.trim().split(/}\s*(?=\.)/).map(rule => rule.includes('}') ? rule : rule + '}');
rules.forEach(rule => {
  if (rule.trim()) {
    sheet.insertRule(rule);
  }
});

document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

注意：这种拆分方式仅适用于简单样式，包含嵌套规则、注释的复杂CSS需要专业的解析逻辑支持。

总结来说，方法1和方法2实现简单且不易出错，是最推荐的方案。

内容的提问来源于stack exchange，提问作者Rue Vitale