HTML Invoker Commands

HTML Invoker Commands let a button control another element declaratively. You connect the button to a target with the commandfor attribute and state the action with command. For supported built-in actions, the browser handles the interaction without a JavaScript click listener.

You can use invoker commands with dialogs, popovers, and custom component actions. They keep the relationship between a control and its target visible in the HTML, while preserving normal keyboard button behavior.

How Invoker Commands Work

Place commandfor and command on a <button>. The commandfor value must match the target element's id.

Syntax:

<button commandfor="target-id" command="action">
  Button text
</button>

When you activate the button, the browser sends the named command to the target. Built-in commands perform a standard action. A custom command begins with two hyphens and fires a command event that your script can handle.

Open and Close a Dialog

A dialog accepts show-modal, close, and request-close. The first command opens a modal dialog. The close command closes it immediately, while request-close allows the dialog's cancel behavior to run first.

Example:

<!-- Open the dialog without a JavaScript click handler. -->
<button command="show-modal" commandfor="registration-dialog">
  View registration details
</button>

<dialog id="registration-dialog">
  <h2>Frontend Workshop</h2>
  <p>Saturday, 10:00 AM - 12:00 PM</p>

  <!-- Send a close command to the same dialog. -->
  <button command="close" commandfor="registration-dialog">
    Close
  </button>
</dialog>

Built-in Command Values

Control a Popover

You can connect several buttons to the same popover. This is useful when the open and close controls appear in different parts of the component.

Example:

<!-- Both buttons target the same help panel. -->
<button command="show-popover" commandfor="shipping-help">
  Show shipping help
</button>

<aside id="shipping-help" popover>
  <p>Orders usually leave the warehouse within two working days.</p>
  <button command="hide-popover" commandfor="shipping-help">
    Close help
  </button>
</aside>

Create a Custom Command

Use a command name that starts with -- when the built-in actions do not cover your component. Listen for the command event on the target, not on the button.

Example:

<button command="--increase" commandfor="quantity">Add one</button>
<output id="quantity">1</output>

<script>
  const quantity = document.getElementById("quantity");

  // Handle the custom command on the target element.
  quantity.addEventListener("command", (event) => {
    if (event.command === "--increase") {
      quantity.value = Number(quantity.value) + 1;
    }
  });
</script>

Accessibility and Fallbacks

• Use a real <button> so keyboard users receive native activation behavior.
• Give every button a clear label that describes its result.
• Use <dialog> and the popover attribute for their built-in focus and dismissal behavior.
• Do not depend on an unsupported command for essential navigation. Add a JavaScript fallback when your browser support target requires one.
• Test focus movement, the Escape key, and screen-reader announcements.

Tip: Check current browser support before using invoker commands in production. The HTML can remain readable when the command is unsupported, but the action will not run automatically.

Conclusion

HTML Invoker Commands connect buttons to dialogs, popovers, and custom targets with clear declarative markup. Use commandfor to identify the target, choose a suitable built-in command, and add JavaScript only for custom behavior or compatibility fallbacks.