.tip

A hand-rolled modal is a div with position: fixed, a focus trap and an Escape handler, and it still leaves focus in the wrong place on close. showModal() gives you the top layer, a ::backdrop, the page behind it inert, Escape, and focus back on the button that opened it.

<dialog id="confirm">
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="delete" autofocus>Delete</button>
  </form>
</dialog>

A button in that form closes the dialog and sets returnValue to its value, which you read in the close event. show() does none of it.