demo · v133
Toolbar menu — positioning without anchor names
Three toolbar buttons, three drop-down menus. Each menu uses position-area: bottom span-right with no anchor-name on the button and no position-anchor on the menu — the implicit invoker relationship handles it now.
Implicit popover invoker anchoring is not supported here. The menus will fall back to fixed position. Needs Chrome 133+.
Resize this window narrow to watch position-try-fallbacks flip the menus when they'd overflow.
what changed in the spec
Pre-133, position-area needed an anchor-name on the trigger and a matching position-anchor on the popover — explicit IDREF on both sides. The 133 change makes the popovertarget button automatically the implicit anchor for its popover. position-area resolves relative to whichever element invoked the popover, including across showPopover() from JS. One fewer CSS variable, three fewer places to typo a name.
<button popovertarget="menu">File</button>
<div id="menu" popover style="position-area: bottom span-right">…</div>
/* No anchor-name on button, no position-anchor on menu. */