我正在尝试使用自定义CSS属性更改dialog元素backdrop的背景颜色，但是不会。这是Chrome中的错误，还是有原因？
document.querySelector('dialog').showModal();:root {
--color-backdrop: red;
}
dialog::backdrop {
background: var(--color-backdrop);
}<dialog><p>This is a dialog. My backdrop should be red.</p></dialog>
spec声明了关于::backdrop伪元素的以下内容：
它不继承任何元素，也不继承。对该属性适用的属性也没有任何限制。
有关WHATWG成员quote Xindorn Quan的CSS自定义属性：
CSS变量通过继承传播到后代，因此，如果伪元素不继承任何东西，那么未直接为伪元素定义的CSS变量将不会对伪元素产生影响。
最后，这是解决此类问题的一种方法：
document.querySelector('dialog').showModal();::backdrop {
--color-backdrop: red;
}
dialog::backdrop {
background: var(--color-backdrop);
}<dialog><p>This is a dialog. My backdrop should be red.</p></dialog>
可以这么说，对于::backdrop的多个模式来说，这似乎是有用的，可以用来组织其“根”。