如何在不创建内联样式覆盖的情况下动态更改CSS自定义属性的值

Question

看着this example，我发现更改CSS自定义属性的页面更新值的颜色似乎需要设置内联样式以覆盖默认值。

换句话说，在链接的示例中，--mainColor在CSS代码中设置了带有以下内容的默认值：

:root {
    --mainColor: #f06d06;
}

，并且从表单字段中选择了其他颜色时，此自定义属性的新值在html标记中设置为嵌入式样式，而不是简单地更新。

这是正确的（也是不可避免的）行为吗？还是可以简单地更新以前的值而无需使用内联样式覆盖它？