← Back to release summary

Invoker Commands; the command and commandfor attributes

Category
DOM
Type
New or changed feature
Status
Enabled by default (Chrome 135)
Intent stage
None

Summary

Adding command and commandfor attributes to <button> elements would allow authors to assign behaviour to buttons in a more accessible and declarative way, while reducing bugs and simplifying the amount of JavaScript pages are required to ship for interactivity. Buttons with commandfor and command attributes will - when clicked, touched, or enacted via keypress - dispatch a CommandEvent on the element referenced by commandfor, with some default behaviours such as opening dialogs and popovers.

Motivation

All elements within the DOM are capable of having interactions added to them. A long while ago this took the form of adding inline JavaScript to an event attribute, such as <button onclick="other.open()"></button>. Inline JavaScript has (rightly so) fallen out of favour due to the security and maintainability concerns. Newer pages may instead introduce more JavaScript to imperatively discover elements and call addEventListener('click', ...) to invoke the same behaviour. These patterns reduce developer experience and introduce more boilerplate and friction, while remediating security and maintainability concerns. Some frameworks attempt to reintroduce the developer experience of inline handlers by introducing new JavaScript or HTML shorthands, such as React’s onClick={...}, Vue’s @click=".." or HTMX’s hx-trigger="click". This proposal attempts to redress the balance by adding commandfor and command attributes to <button> elements, which would allow authors to assign behaviour to buttons in a more accessible and declarative way, while reducing bugs and simplifying the amount of JavaScript pages are required to ship for interactivity.

Standards & signals

Explainers: https://open-ui.org/components/invokers.explainer

View on chromestatus.com