TheInvoker 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 closingpopovers 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. ThecommandForElement andcommand 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

Turns a<button> element into a button, 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 thecommandfor attribute.

Interfaces

CommandEvent

Represents an event notifying the user that a command has been issued. It is the event object for thecommand event. The event fires on element referenced bycommandForElement.

Extensions to other interfaces

Instance properties

HTMLButtonElement.commandForElement

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

HTMLButtonElement.command

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

Events

command event

Fired on the element referenced by the button.

Examples

Creating declarative popovers

<button commandfor="mypopover" command="toggle-popover">  Toggle the popover</button><div popover>  <button commandfor="mypopover" command="hide-popover">Close</button>  Popover content</div>

Creating declarative dialogs

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

Creating custom commands

<button commandfor="my-img" command="--rotate-left">Rotate left</button><button commandfor="my-img" command="--rotate-right">Rotate right</button><img src="photo.jpg" alt="[add appropriate alt text here]" />

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

Browser compatibility

api.CommandEvent

api.HTMLButtonElement.commandForElement

api.HTMLButtonElement.command

See also

• command property
• commandForElement property
• CommandEvent interface