Invoker Commands: Additional Ways to Work With Dialog, Popover… and More?

The dialog element and Popover API are powerful additions to the web platform. I recently provided a detailed analysis of their applications and uncovered undocumented techniques. However, their separate implementations feel unnecessarily complex.

Web browsers are introducing "invoker commands" – the command and commandfor attributes – to simplify interaction with popovers, dialogs, and future features, minimizing JavaScript reliance. These attributes also introduce new JavaScript events.

Experimental Status:

Remember, these are experimental features. Enable them in:

• Chrome Canary 134 (flag: enable-experimental-web-platform-features)
• Firefox Nightly 135 (flag: dom.element.invokers.enabled)
• Safari Technology Preview (flag: InvokerAttributesEnabled)

Their elegant abstraction of scripting tasks suggests widespread adoption is likely.

Basic Usage:

Use a button-like element (e.g., <button></button>, <a></a>) with the command attribute (specifying the command name, like "show-modal") and commandfor (referencing the target element's ID).

<button command="show-modal" commandfor="dialogA">Show dialogA</button>
<dialog id="dialogA">...</dialog>

Let's explore the command values.

Attribute Values:

• show-modal: The HTML equivalent of showModal(). It allows modal display without JavaScript. This mirrors the existing HTML-invoked popovers, creating a more consistent approach.

• show: A show command for non-modal dialogs is absent. Given the Popover API's capabilities, non-modal dialogs may become obsolete.

• close: The HTML equivalent of close(), closing the dialog.

• show-popover, hide-popover, toggle-popover: These mirror showPopover(), hidePopover(), and togglePopover(), respectively. While useful, their functionality is already accessible through existing popover attributes.

Here's a summary:

Command	Equivalent JavaScript Method	Notes
show-modal	showModal()	Shows a modal dialog.
close	close()	Closes a dialog or popover.
show-popover	showPopover()	Shows a popover (redundant with existing popover attributes).
hide-popover	hidePopover()	Hides a popover (redundant with existing popover attributes).
toggle-popover	togglePopover()	Toggles a popover (redundant with existing popover attributes).
--custom-command	N/A	Custom commands prefixed with --.

JavaScript Event Handling:

Invoker commands trigger a command event on the target element. This is particularly useful for dialog elements, which lack a show event.

<button command="show-modal" commandfor="dialogA">Show dialogA</button>
<dialog id="dialogA">...</dialog>

Popover event handling is similar:

dialogs.forEach(dialog => {
  dialog.addEventListener("command", event => {
    if (event.command === "show-modal") { /* Dialog shown */ }
    else if (event.command === "close") { /* Dialog closed */ }
  });
});

event.source provides the invoking button element. Attributes can also be set via JavaScript:

popovers.forEach(popover => {
  popover.addEventListener("command", event => {
    if (event.command === "show-popover") { /* Popover shown */ }
    // ...
  });
});

Custom Commands:

Custom commands (e.g., --spin-me-a-bit) allow for extended functionality.

Future Support:

While initially focused on <dialog></dialog> and popovers, future support for <details></details>, <input type="color">, <video></video>, and fullscreen controls is anticipated.

Benefits:

Invoker commands reduce JavaScript, offer event-like handling, and provide alternative interaction methods for existing APIs. They refine and enhance existing features.

The above is the detailed content of Invoker Commands: Additional Ways to Work With Dialog, Popover… and More?. For more information, please follow other related articles on the PHP Chinese website!