CSS Modal Controls with commandfor and command Attributes
Modal controls without onclick handlers
Opening a dialog modally required onclick handlers calling showModal(). Invoker Commands let buttons perform actions on other elements declaratively with commandfor and command attributes.
<!-- Inline onclick or JS event listener --><button onclick=" document.querySelector('#dlg') // [!code --] .showModal()"> // [!code --] Open Dialog</button><dialog id="dlg">...</dialog><button commandfor="dlg" command="show-modal"> Open Dialog</button><dialog id="dlg">...</dialog>invoker commands Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
Declarative
Link a button to its target with commandfor (like the for attribute on labels). No querySelector, no addEventListener.
Multiple commands
show-modal, close, show-popover, hide-popover, toggle-popover. One pattern for all interactive elements.
Custom commands too
Prefix with -- for custom commands handled by the command event. Extensible without frameworks.
How it works
To open a <dialog> modally, you needed JavaScript: either an inline onclick that calls showModal(), or an addEventListener in a script. Same for popovers and closing. Every interactive trigger required its own JS wiring.
Invoker Commands (Chrome 135+) add two HTML attributes: commandfor takes the ID of the target element, and command specifies the action. Built-in commands mirror their JS counterparts: show-modal, close, show-popover, hide-popover, toggle-popover. Custom commands prefixed with -- fire a command event on the target for extensibility.