使用cssRules更改自定义变量的值后，更新不会反映

Question

我尝试使用CSSOM修改样式表规则中的自定义属性。

const cssRule = document.styleSheets[0].cssRules[0]

function changeColor() {
  console.log(cssRule.style["--color"])
  cssRule.style["--color"] =
    cssRule.style["--color"] === "red" ? "blue" : "red"
  cssRule.style.color = cssRule.style["--color"] // ★
}

p {
  --color: green;
  color: var(--color);
}

<p>The color.</p>
<button onclick="changeColor()">Change the color</button>

但是当注释带有// ★的行时，就会出现问题。

为什么会这样？还有其他方法可以触发浏览器更新属性（就像在开发人员工具的检查器中一样）吗？