为何更新CSSStyleSheet现有规则无效？如何修改其:root变量？

我使用new CSSStyleSheet()为内容依赖型文档创建自定义样式表，通过:root选择器添加CSS变量，项目中的元素通过动态生成的ID选择器应用使用这些变量的规则，这部分功能运行正常。

现在遇到的问题是：特定事件触发时需要修改CSS变量的值，我尝试了带索引/不带索引的insertRule()，以及replace()、replaceSync()方法，但都没达到预期效果。请问如何修改该样式表的:root规则？

代码示例 #

JavaScript代码 #

const CSS = new CSSStyleSheet();

const rootRule = `:root{
  --background: red;
}`;
CSS.insertRule(rootRule, 0);

const bodyRule = `body { 
  background: var(--background); 
}`
CSS.insertRule(bodyRule, 1);

document.adoptedStyleSheets = [CSS];


// change color
BUTTON.addEventListener('click', function() {
  console.log('button clicked');
  const newRule = `:root {
    --background: blue;
  }`
  CSS.insertRule(newRule, 0);
})

HTML代码 #

<button id="BUTTON">Change background-color</button>

你之前的问题核心是重复插入:root规则而非修改已有规则，下面提供两种高效的解决方式：

方法一：定位并修改样式表内的:root规则 #

遍历自定义样式表的cssRules集合，找到目标:root规则后直接修改其样式声明：

const CSS = new CSSStyleSheet();

const rootRule = `:root{
  --background: red;
}`;
CSS.insertRule(rootRule, 0);

const bodyRule = `body { 
  background: var(--background); 
}`
CSS.insertRule(bodyRule, 1);

document.adoptedStyleSheets = [CSS];

// 修改颜色的正确逻辑
BUTTON.addEventListener('click', function() {
  // 遍历找到:root规则
  for (const rule of CSS.cssRules) {
    if (rule.selectorText === ':root') {
      // 直接修改CSS变量值
      rule.style.setProperty('--background', 'blue');
      break;
    }
  }
})

方法二：直接修改文档根元素的CSS变量（更简便） #

如果不需要严格在自定义样式表内修改，可直接操作document.documentElement，这种方式优先级高于样式表中的:root规则，实现更简洁：

const CSS = new CSSStyleSheet();

const rootRule = `:root{
  --background: red;
}`;
CSS.insertRule(rootRule, 0);

const bodyRule = `body { 
  background: var(--background); 
}`
CSS.insertRule(bodyRule, 1);

document.adoptedStyleSheets = [CSS];

// 直接修改根元素变量
BUTTON.addEventListener('click', function() {
  document.documentElement.style.setProperty('--background', 'blue');
})

原方法无效的原因 #

你之前用insertRule()插入新的:root规则，会导致样式表中存在多个相同选择器的规则。虽然浏览器会按规则优先级覆盖变量值，但这种重复添加的方式会增加样式表冗余，还可能引发后续规则冲突问题，并非最优解。

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