.tip

A hand-rolled modal is a div with position: fixed, a focus trap and an Escape handler, and it still puts focus in the wrong place on close. showModal() gives you the top layer, a ::backdrop, an inert page behind it, 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, which you read in the close event. show() does none of this.