demo · v140

Invoker Trace

The ToggleEvent fired when a popover opens or closes now carries a source property: the element that triggered the toggle. Three different buttons open the same popover — the event log shows exactly which one fired the toggle each time.

Popover

This popover is shared by all three buttons. Each toggle event records which button fired it via the new event.source.

Press Escape to close — the source for a light-dismiss close is the popover itself (no invoker).

Open the popover from a button to see the source.

document.getElementById("pop").addEventListener("toggle", (e) => {
  // e.source is the element that invoked the toggle (Chrome 140+)
  // can be a button with popovertarget, or null for light-dismiss
  console.log("invoked by:", e.source);
  console.log("new state:", e.newState);
});

// Use the same hook for <dialog> toggles and commandfor invokers.

see also