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

Question

我正在尝试更改 dialog 的背景颜色元素的 backdrop使用自定义 CSS 属性，但不需要。这是 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伪元素:

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.

并到 quote Xindorn Quan WHATWG 成员，关于 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 的多个模态很有用，作为组织他们的“根”的一种方式，可以这么说。