1 min read
|
Saved February 14, 2026
|
Copied!
Do you care about this?
This article explains how to use Invoker Commands in Chrome 135 to open modals and popovers without any JavaScript. By using the `commandfor` and `command` attributes in buttons, developers can create more intuitive and portable interactions. Custom commands can also be defined for additional functionality.
If you do, here's more
Invoker Commands allow you to trigger actions on elements like `<dialog>` and popovers without writing JavaScript. Instead of attaching an onclick handler to a button, you can use the `commandfor` attribute to specify which element to control and the `command` attribute to define the action. For example, a button can open a modal dialog simply by using `<button commandfor="my-dialog" command="show-modal">Show Dialog</button>`. This feature, available in Chrome 135 and later, streamlines the process and makes it more intuitive.
The commands mirror existing JavaScript methods for manipulating elements. You can use commands like `show-popover`, `hide-popover`, and `toggle-popover` for popover elements, or `show-modal` and `close` for dialogs. This consistency helps developers understand how to use the new system quickly. Custom commands are also possible, prefixed with two dashes, and can be handled with a simple event listener. For example, a button can trigger a custom event to show confetti by responding to a command event.
A polyfill is available for those who want to use Invoker Commands in browsers that do not support them yet, ensuring broader compatibility. Overall, this feature simplifies the way developers can create interactive elements, reducing the need for JavaScript boilerplate code while enhancing code readability and maintainability.
Questions about this article
No questions yet.