title: CSS variables not working in dialog::backdrop
body: <p>I'm trying to change the background color of a <code>dialog</code> element's <code>backdrop</code> using a custom CSS property but it won't take. Is this a bug in Chrome or is there a reason for this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('dialog').showModal();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --color-backdrop: red;
  }
  
  dialog::backdrop {
    background: var(--color-backdrop);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dialog&gt;
    &lt;p&gt;This is a dialog. My backdrop should be red.&lt;/p&gt;
  &lt;/dialog&gt;</code></pre>
  </div>
  </div>
  </p>