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 pseudo-element 的陈述如下：

It does not inherit from any element and is not inherited from. No restrictions are made on what properties apply to this pseudo-element either.

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

CSS variables are propagated via inheritance into descendants, so if a pseudo-element doesn't inherit from anything, CSS variables which are not defined for the pseudo-element directly would have no effect on the pseudo-element.

最后，这是针对此类问题的一种解决方案：

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