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

伪元素的内容：

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

并引用 WHATWG 成员 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

的多个模态很有用，可以这么说，作为组织其“根”的一种方式。

Answer 2

2023更新

规范已更新，允许

::backdrop

从原始元素继承，这允许背景识别 CSS 变量。每个主要浏览器都有更新其实现的错误。

很快 OP 示例就可以工作了:)