No Login Data Private Local Save

commandfor & command Attribute Demo - Online Declarative Actions

20
0
0
0

commandfor & command Demo

Detecting...

Explore the Invoker Commands API — a declarative way to wire up buttons to dialogs, popovers, and more without writing any JavaScript. Part of the modern HTML specification for building cleaner, more accessible UIs.

Live Demo: Dialog with commandfor

No JavaScript needed — the button opens and closes the dialog declaratively.

Dialog Opened!

This <dialog> was opened entirely through the commandfor + command="show-modal" attributes — zero JavaScript.

Try clicking both buttons! The dialog opens modally and closes without any JS.
Source Code
<!-- Button triggers dialog via commandfor -->
<button commandfor="demoDialog"
        command="show-modal">
  Open Dialog
</button>

<button commandfor="demoDialog"
        command="close">
  Close Dialog
</button>

<!-- The dialog itself -->
<dialog id="demoDialog">
  <h5>Dialog Opened!</h5>
  <p>No JavaScript needed.</p>
  <!-- Internal close button -->
  <button commandfor="demoDialog"
          command="close">
    Close
  </button>
</dialog>
Traditional JS vs Declarative commandfor
With JavaScript (Old Way) 
<button id="myBtn">Open</button>
<dialog id="myDialog">...</dialog>

<script>
  document.getElementById('myBtn')
    .addEventListener('click', () => {
      document.getElementById('myDialog')
        .showModal();
    });
</script>
  • Requires querySelector / getElementById
  • Manual event listener setup
  • More boilerplate code
  • Harder to read intent
With commandfor (New Way) 
<!-- No JavaScript needed! -->
<button commandfor="myDialog"
        command="show-modal">
  Open
</button>
<dialog id="myDialog">...</dialog>
  • Zero JavaScript required
  • Intent is clear from HTML alone
  • Less code, fewer bugs
  • Better for accessibility & SEO
Browser Compatibility
Browser commandfor / command Popover API Notes
Chrome âś… 125+ âś… 114+ Full support
Edge âś… 125+ âś… 114+ Full support
Firefox ⚠️ Partial ✅ 125+ commandfor behind flag; popover supported
Safari ❌ Not yet ⚠️ 17+ Under development

Last updated: Check Can I Use for the latest support data. Progressive enhancement recommended.

Frequently Asked Questions
What is the commandfor attribute?

commandfor is an HTML attribute placed on a <button> that references the id of a target element (like a <dialog> or popover). Combined with the command attribute, it declaratively wires up interactive behavior without JavaScript. It's part of the Invoker Commands API specification.

What values can the command attribute take?

Currently supported values: show-modal (opens a dialog modally), close (closes a dialog), show-popover, hide-popover, and toggle-popover. The value you use depends on the target element type and desired behavior.

Do I need JavaScript for commandfor to work?

No. That's the entire point! In supporting browsers, commandfor + command work entirely through the browser's built-in HTML parser and rendering engine. Zero JavaScript is required. For unsupported browsers, you can add a small polyfill or fallback.

How is commandfor better than onclick?

commandfor keeps behavior in HTML where it belongs, making intent clearer and code more maintainable. It works even when JavaScript is blocked or fails, improves accessibility by leveraging native browser mechanics, and eliminates boilerplate event listener code.

Can one button control multiple elements?

A single commandfor attribute references one target ID. To control multiple elements, you'd need multiple buttons. However, you can have multiple buttons all targeting the same element with different command values (e.g., one for show, one for hide).

What's the difference between commandfor and the popover attribute?

The popover attribute is placed on the target element to designate it as a popover. commandfor is placed on the triggering button to reference and control that popover. They work together: popover makes an element a popover; commandfor controls it declaratively.

Does commandfor work with forms or custom elements?

Currently, commandfor is primarily designed for <dialog> and popover elements. The Invoker Commands API may expand to support custom elements and other interactive targets in future specification updates. For forms, traditional form attributes are still recommended.

How do I provide a fallback for unsupported browsers?

Use progressive enhancement: keep your commandfor buttons, and add a small feature-detection script that checks 'commandFor' in HTMLButtonElement.prototype. If unsupported, attach traditional addEventListener handlers as a fallback. This ensures all users get a working experience.

Key Takeaways
1 Zero JS
Declarative HTML-only interactions
2 Accessible
Native browser focus & keyboard handling
3 Clean Code
Less boilerplate, clearer intent
4 Progressive
Easy to polyfill for older browsers
🔧 Related Tools