demo · v139
Declarative Confirm Flow
A dialog that confirms before closing — entirely declarative. command="request-close" on the button fires cancel on the dialog, which a guard can preventDefault. No JavaScript on the button itself. Then a save-and-close variant via command="close".
open editor
Checking command support...
declarative snippet
<dialog id="editor">
<form id="form" method="dialog">
<fieldset>
<legend>edit</legend>
<input name="title" />
</fieldset>
<!-- v139: declarative request-close. Triggers the
dialog's cancel event; a guard can preventDefault. -->
<button command="request-close" commandfor="editor">Cancel</button>
<!-- close = unconditional unmodified close -->
<button command="close" commandfor="editor">Save & close</button>
</form>
</dialog>
<script>
editor.addEventListener('cancel', (e) => {
if (formIsDirty() && !confirm('Discard changes?')) e.preventDefault();
});
</script>