说我是某个Web组件的图书馆作者；我想允许用户设置组件的背景色。我可以通过设置--background-color来允许。例如，用户可以编写以下代码：
:root {
--background-color: green;
}
现在在我的组件中，我想获取--background-color的用户值，或者使用默认颜色：
.some-component {
display: contents;
--background-color: var(--background-color,red);
}
但是上面的代码不起作用。我不介意，有解决方法。但我想知道为什么不起作用，如果有人对此有答案。
在下面的代码中，绿色应该是预期的，但是--background-color: var(--background-color,red);行似乎以某种方式“破坏”了CSS。
:root {
--background-color: green;
}
.some-component {
display: contents;
--background-color: var(--background-color,red); /* this doesn't work */
}
.some-component__container {
background-color: var(--background-color,blue);
height: 100px;
width: 100px;
}<!-- user code -->
<div class="app">
<!-- library code -->
<div class="some-component">
<div class="some-component__container">
</div>
</div>
</div>