demo · v140

Input Method Comparison

Chrome 140 adds ToggleEvent.source — the element that triggered the toggle. But the even bigger addition is knowing how it was triggered. Open the details elements below via mouse, keyboard (Tab + Space/Enter), or programmatically — the log captures each source and categorises the input method.

Checking ToggleEvent.source support...
Details A — try mouse click
Opened by pointer. The click event propagated to the summary, which triggered the toggle.
Details B — try keyboard (Tab then Space)
Opened by keyboard. The focus + keypress path triggered the toggle.
Details C — programmatic
Opened programmatically via .open = true or .setAttribute('open', '').

Also: popover toggle with source

Popover content. Source logged in the event log below.
0
pointer
0
keyboard
0
programmatic
0
none / unknown

Event log (last 20 events, newest first):

Toggle a details or popover above to see events.

Source-aware analytics pattern 
details.addEventListener('toggle', (e) => {
  // Only track opens that came from a real user action
  if (e.newState === 'open' && e.source != null) {
    analytics.track('details_open', {
      element: e.target.id,
      inputMethod: classifySource(e), // 'pointer' | 'keyboard'
    });
    // Skip if e.source is null — that's a programmatic open
  }
});
// ToggleEvent.source — Chrome 140+
details.addEventListener('toggle', (e) => {
  console.log('newState:', e.newState);
  console.log('oldState:', e.oldState);
  console.log('source:',   e.source);
  // e.source is the element that triggered the toggle,
  // or null if triggered programmatically / via Esc / light-dismiss
});

// Feature detection
const hasSource = 'source' in ToggleEvent.prototype;

see also