<dialog>
  <h2>Are you sure?</h2>
  <p>Are you sure you want to delete this?</p>

  <form method="dialog">
    <button type="submit" value="cancel">Cancel</button>
    <button type="submit" value="delete">Delete</button>
  </form>

</dialog>

<button type="button" id="delete">Delete</button>

const dialog = document.querySelector('dialog');
const deleteButton = document.querySelector('#delete');

deleteButton.addEventListener('click', () => {
  dialog.show();
});

dialog.addEventListener('close', () => {
  console.log(dialog.returnValue);
});