09 · Invoker
Invoker
Buttons that control elements without JS
commandfor + command
A <button commandfor="id" command="..."> controls a popover or dialog without onclick.
<button commandfor="x" command="toggle-popover">
Native commands
toggle-popover, show-popover, hide-popover for popovers; show-modal and close for dialogs.
command="show-modal" · "close" · "toggle-popover"
No JS
Before you needed addEventListener + .showPopover() or .showModal(). Now it's an HTML attribute.
Popover via Invoker
This popover opened with commandfor + command="toggle-popover", no JS.
<!-- popover: sin onclick, sin addEventListener -->
<button commandfor="inv-pop" command="toggle-popover">
Abrir popover
</button>
<!-- diálogo modal -->
<button commandfor="inv-dialog" command="show-modal">
Abrir diálogo
</button>
<div popover id="inv-pop">...</div>
<dialog id="inv-dialog">...</dialog>An honest note on support
Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".