Invoker Commands API

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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).

Concepts and usage

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.

HTML attributes

commandfor Experimental

Turns a <button> element into a button, controlling the given interactive element; takes the ID of the element to control as its value.

command Experimental

Specifies the action to be performed on an element being controlled by a control <button>, specified via the commandfor attribute.

Interfaces

CommandEvent Experimental

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.

Extensions to other interfaces

Instance properties

HTMLButtonElement.commandForElement

Gets and sets the element being controlled by the button. The JavaScript equivalent of the commandfor HTML attribute.

HTMLButtonElement.command

Gets and sets the action to be performed on the element being controlled by the button. Reflects the value of the command HTML attribute.

Events

command event

Fired on the element referenced by the button.

Examples

Creating declarative popovers

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>

Creating declarative dialogs

html
<button commandfor="mydialog" command="show-modal">Show modal dialog</button>
<dialog id="mydialog">
  <button commandfor="mydialog" command="close">Close</button>
  Dialog Content
</dialog>

Creating custom commands

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";
  }
});

Specifications

No specification found

No specification data found for api.CommandEvent,api.HTMLButtonElement.commandForElement,api.HTMLButtonElement.command.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

api.CommandEvent

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CommandEvent
Experimental
CommandEvent() constructor
Experimental
command
Experimental
source
Experimental

Legend

Tip: you can click/tap on a cell for more information.

No support
No support
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.

api.HTMLButtonElement.commandForElement

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
commandForElement
Experimental

Legend

Tip: you can click/tap on a cell for more information.

No support
No support
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.

api.HTMLButtonElement.command

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
command
Experimental

Legend

Tip: you can click/tap on a cell for more information.

No support
No support
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.

See also