<div>
  <dialog id="dialog">
    <form method="dialog">
      <p>Hi, I'm a dialog. Notice I have a gray overlay behind me?</p>
      <button>OK</button>
    </form>
  </dialog>
  <button onclick="dialog.showModal()">Open Dialog</button>
  <dialog id="dialog2" open>
    <form method="dialog">
      <p>I'm a dialog that is open by default. Notice I have no <i>::backdrop</i> overlay?</p>
      <p>Try closing me and having a look at the other dialog that is programatically opened</p>
      <button>OK</button>
    </form>
  </dialog>
</div>

html {
  block-size: 100%;
  color-scheme: dark light;
}

body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  
  display: grid;
  place-content: center;
  margin: 0;
}

::backdrop {
  background-color: rgb(255,255,255, 6%);
}