demo · v132

Three invoker types side-by-side

v132 finalises three forms of popover invocation: popovertarget (button), invoketarget (custom commands), and showPopover() (script). Each plays differently with anchor positioning and accessibility.

1. popovertarget

The original. Standard, works in all modern browsers. Auto-anchors via position-anchor.

    •  
    <button popovertarget="pop1">Open Menu</button>
<div popover id="pop1">...</div>

    2. commandfor / command (v132)

    Generalised invoker for popovers, dialogs, and details. Same default behaviour but extensible.

    • <button commandfor="pop2"
        command="show-popover">Open</button>

    3. script showPopover()

    Programmatic. Anchor manually if needed.

    • document.getElementById('b3')
  .addEventListener('click', () =>
    document.getElementById('pop3').showPopover()
  );

    4. dialog +command

    Same machinery, target a <dialog>, get showModal() semantics.

    Hi! 

    <button commandfor="dlg"
        command="show-modal">Open</button>

    see also