CSS variables not working in dialog::backdrop

by

Updated answer (29/02/2024)

As pointed out by Wes Goulet, this will change (or has changed) and we may have the expected behaviour of the original poster. So, the following probably works on all major browsers:

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>

We can check its status following these links:

  • web platform tests for “::backdrop inherits”;
  • Chromium Bug #40569411;
  • Gecko/Firefox Bug #1855668;
  • WebKit Bug #263834;

Outdated answer

The spec states the following about ::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.

And to quote Xindorn Quan, a member of WHATWG, regarding CSS Custom Properties:

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.

Finally, this is one solution for this kind of problem:

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>

It seems to be useful for multiple modals with ::backdrop, as a way of organizing their “root”, so to speak.

Leave a Comment