html-invoker-commands-api.md

The commandfor & command attributes (Invoker Commands API)

New syntax:

<button commandfor="my-modal" command="show-modal">Trigger dialog</button>
<dialog id="my-modal">This is my dialog</dialog>

<div class="counter">
  <button commandfor="num" command="step-down">-</button>
  <input type="number" min="1" id="num" value="1">
  <button commandfor="num" id="btn" command="step-up">+</button>
</div>

• 2025-03-07 — Introducing command and commandfor
• 2025-02-19 — HTML Spec (merged)
• 2024-07-15 — An update on invokers: Invoker commands in HTML
• 2024-03-24 — I love invokers and you should too
• Full list of built-in commands
• Can I use HTML attribute: invokeaction
• Explainer
• Invokers Proposal
• Intent to Prototype: Invokers (Chrome)
• Ship Invokers proposal to all major browsers (Nov 2023)

Old syntax:

<button invoketarget="my-dialog">This opens a dialog</button>
<dialog id="my-dialog">This is the dialog</dialog>

Adding invoketarget and invokeaction attributes to <button> and <input type="button"> / <input type="reset"> elements would allow authors to assign behaviour to buttons in a more accessible and declarative way, while reducing bugs and simplifying the amount of JavaScript pages are required to ship for interactivity. Buttons with invoketarget will - when clicked, touched, or enacted via keypress - dispatch an InvokeEvent on the element referenced by invoketarget, with some default behaviours.