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
Since 2025 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
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 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. Chrome 135, Firefox 144, Safari 26.2, and Edge 135. Baseline Newly available in 2025.