demo · v136

request-close

Buttons with command="request-close" close a dialog AND fire the cancel event — so the dialog can preventDefault() them. Old command="close" closes unconditionally.

Probing HTMLButtonElement.prototype.command…

Confirm draft discard

You have unsaved changes. Are you sure you want to discard them?

event log

the code

<button commandfor="d" command="show-modal">Open</button>

<dialog id="d">
  <form>...</form>
  <!-- close: dismisses unconditionally -->
  <button commandfor="d" command="close">X</button>

  <!-- 136+: request-close fires 'cancel' first; can be prevented -->
  <button commandfor="d" command="request-close">Cancel</button>
</dialog>

<script>
  d.addEventListener('cancel', e => {
    if (formIsDirty()) e.preventDefault();
  });
</script>

see also