v136 · dom
Multi-Dialog Stack
A wizard-style dialog stack where each step uses command="request-close" on its back/cancel button. The cancel event fires on every close path — Esc, backdrop, and the invoker button — so one handler per dialog guards unsaved state without duplicating logic.
checking command= support…
checking request-close…
command="request-close" is the declarative equivalent of calling dialog.requestClose(): it fires a cancel event before closing, giving you one place to run validation or show a "discard changes?" confirmation. command="close" skips cancel entirely.
Dialog stack demo
No dialogs open
Event log
Events appear here…
The HTML pattern
<!-- request-close fires cancel before closing -->
<button commandfor="myDialog" command="request-close">Cancel</button>
<!-- close skips cancel entirely -->
<button commandfor="myDialog" command="close">Dismiss</button>
<!-- One cancel handler per dialog guards all exit paths -->
<script>
myDialog.addEventListener('cancel', (e) => {
if (formIsDirty) {
e.preventDefault(); // stop the close
showConfirmationDialog();
}
});
</script>