Stop writing click handlers for UI
Set markodenic.tech as your preferred Google source
Sponsor this newsletter · reach 9,500+ active developers
Hey everyone,
We’ve spent years writing the same “glue code” just to open a dialog or a popover.
javascript
// The old way (Every. Single. Time.)
const btn = document.querySelector('#open-btn');
const dialog = document.querySelector('#my-dialog');
btn.addEventListener('click', () => {
dialog.showModal();
});Starting in 2025/2026, we have a native, declarative way to do this using Invokers. No JavaScript required for the toggle.
The Modern Way: commandfor and command
By using the commandfor attribute on a button, you can point directly to an interactive element (like a <dialog> or a popover) and tell it what to do.
html
<button commandfor="my-dialog" command="show-modal">
Open Dialog
</button>
<dialog id="my-dialog">
<p>Look, Ma! No JS click handler.</p>
<button commandfor="my-dialog" command="close">Close</button>
</dialog>Why this is a win:
- Zero JS: You don’t need to wait for the DOM to load or manage event listeners.
- Built-in Accessibility: The browser automatically handles the relationship between the trigger and the target.
- Custom Commands: You can even create custom commands in JS using the
commandevent if you need logic beyond just “open/close.”
Browser Support:
This feature is part of Baseline 2025 and works in the latest versions of Chrome, Edge, Safari, and Firefox.
Happy coding!
P.S. I’ve officially opened up a few spots for 1-on-1 consultations! Since you’re on my list, you can use [this link] to grab a spot at 50% off. I’m only offering 10 at this price, so move fast if you’re interested.