JSFiddle - React, Tailwind, and code Playground

HTML

<button>Open dialog</button>
<dialog>
  My backdrop should be blue, but it is not.
</dialog>
<div>
I am blue
</div>

CSS

html {
  --bg-color: blue;
}

dialog::backdrop {
  background-color: var(--bg-color);
}

div {
  background-color: var(--bg-color);
}

JavaScript

let b = document.body.querySelector('button');
b.addEventListener('click', () => {
  document.querySelector('dialog').showModal();
});