How to use <dialog> to build a barely-any-JS lightbox gallery

Things to note:

• Firefox and Safari don't have support for the <dialog> component but it is polyfillable.
• The bug in Firefox has been open for 8 years but there is active movement on it in recent months https://bugzilla.mozilla.org/show_bug.cgi?id=840640
• The polyfill works well and can be found at https://github.com/GoogleChrome/dialog-polyfill
• dialog.showModal() will programmatically open it
• There is a special form method for closing modals with pure HTML

<dialog>
  <form method="dialog>
    <!-- content -->
    <button value="close">X</button>
  </form>
</dialog>

• You can use the dialog::backdrop pseudo element to style the backdrop of the modal however you like `

dialog::backdrop /* native */, 
dialog + .backdrop /* polyfill */ {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}