CSS 变量在 dialog::backdrop 中不起作用

Question

我正在尝试使用自定义 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>

Answer 1

spec 声明以下关于 ::backdrop 伪元素：

它不继承自任何元素，也不继承自。对该伪元素应用哪些属性也没有限制。

关于 CSS 自定义属性，致 WHATWG 成员 quote Xindorn Quan：

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 的多个模式很有用，可以说是组织它们的“根”的一种方式。