demo · v131

<dialog> fires ToggleEvent

Just like <details>, the dialog element fires beforetoggle and toggle events with oldState and newState. Open and close the dialog below and watch the events arrive.

this is a dialog

Close it and watch the log capture both the beforetoggle and toggle events with oldState / newState.

the api

const dlg = document.querySelector("dialog");
dlg.addEventListener("beforetoggle", (e) => {
  console.log(e.oldState, "->", e.newState);  // "closed -> open"
});
dlg.addEventListener("toggle", (e) => {
  console.log("settled:", e.newState);
});

see also