GeezerVison is showing developer.mozilla.org — Invoker Commands API - Web APIs | MDN
Invoker Commands API
Baseline 2025
Newly available
Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The Invoker Commands API provides a way to declaratively assign behaviors to buttons, allowing control of interactive elements when the button is enacted (clicked or invoked via a keypress, such as the spacebar or return key).
A common pattern on the web is to have <button> elements control various aspects of the page, such as opening and closing popovers or <dialog> elements, formatting text, and more.
Historically creating these kinds of controls has required JavaScript event listeners added to the button which can then call the APIs on the element they control. The commandForElement and command properties provide a way to do this declaratively for a limited set of actions. This can be advantageous for built-in commands as the user does not have to wait for JavaScript to download and execute to make these buttons interactive.
commandfor-
Turns a <button> element into a command invoker, controlling the given interactive element; takes the ID of the element to control as its value.
command-
Specifies the action to be performed on an element being controlled by a control <button>, specified via the commandfor attribute.
CommandEvent-
Represents an event notifying the user that a command has been issued. It is the event object for the command event. The event fires on element referenced by commandForElement.
command event-
Fired on the element referenced by the button.
html
<button commandfor="mypopover" command="toggle-popover">
Toggle the popover
</button>
<div id="mypopover" popover>
<button commandfor="mypopover" command="hide-popover">Close</button>
Popover content
</div>
html
<button commandfor="mydialog" command="show-modal">Show modal dialog</button>
<dialog id="mydialog">
<button commandfor="mydialog" command="close">Close</button>
Dialog Content
</dialog>
html
<button commandfor="my-img" command="--rotate-left">Rotate left</button>
<button commandfor="my-img" command="--rotate-right">Rotate right</button>
<img id="my-img" src="photo.jpg" alt="[add appropriate alt text here]" />
js
const myImg = document.getElementById("my-img");
myImg.addEventListener("command", (event) => {
if (event.command === "--rotate-left") {
myImg.style.rotate = "-90deg";
} else if (event.command === "--rotate-right") {
myImg.style.rotate = "90deg";
}
});