demo · v131
Tracking a nested dialog stack
A real product flow rarely has one dialog. A settings dialog opens a confirm dialog opens a help dialog. Now that toggle events fire on each one, you can keep a live stack of which dialogs are open without a mutation observer. Open the nested chain and watch the stack rebuild itself.
open stack: (empty)
the api in use
const stack = [];
for (const dlg of document.querySelectorAll("dialog")) {
dlg.addEventListener("toggle", (e) => {
if (e.newState === "open") stack.push(dlg.id);
else stack.splice(stack.indexOf(dlg.id), 1);
render(stack);
});
}why this matters
Pre-131 the only way to track an open-dialog stack was a MutationObserver watching the open attribute on every dialog in the page. toggle bubbles, has a synchronous beforetoggle phase you can cancel against, and reports both the previous and new state — so the stack stays in sync even when a dialog closes by Escape, light-dismiss, or form submission.