This content originally appeared on Go Make Things and was authored by Go Make Things
Kelp just got modals and off-canvas navigation drawers, both powered by the <dialog> element.
Today, I wanted to show you how I was able to use the brand-spanking-new Invoker Command API to toggle modals and drawers open from <button> elements without any JavaScript. Let’s dig in!
Like popover, but better
The Popover API can be used to open <dialog> elements in non-modal form with just HTML elements and attributes.
<button popovertarget="my-dialog">
Open Dialog
</button>
<dialog id="my-dialog" popover>
...
</dialog>The non-modal things means that they don’t trap focus and don’t have a visible :backdrop.
I remember a few years back, Keith Cirkel made a post on social media asking if folks would want something that works a similar way but lets you open <dialog> elements in modal form: trapping focus and showing a backdrop.
Well, now you can, because Keith made it happen!
The Invoker Command API
The Invoker Command API let’s your run JavaScript methods on a specific element using just HTML attributes.
On your button, you add a [command] attribute whose value is one a short list that map to <dialog>-specific JavaScript methods, like .showModal() or .close().
As is common with JS-to-HTML/CSS conversions, camelCase becomes kebab-case (.showModal() is show-modal as an HTML attribute property).
You also add a [commandform] attribute, whose value is the ID of the element that the <button> issues commands for.
<button
command="show-modal"
commandfor="my-dialog"
>
Open Dialog
</button>
<dialog id="my-dialog">
...
</dialog>And just like that, you end up with a <dialog> element that can be opened and closed with only HTML attributes, no JavaScript required!
You can even create custom commands (that do require you to write a little JS) if you want.
It’s here already (almost)
Chromium browsers already support the Invoker Command API. Firefox and Safari are both due to add support in the next few months.
Until then, Keith (the API author) released an MIT-licensed polyfill. Polyfills are awesome because you can ship browser-native-but-not-supported-everywhere code right now, and in the future, you can just delete the polyfill when support is good enough.
Kelp includes the polyfill already, so you can grab it and immediately start using this feature everywhere.
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-08-25T14:30:00+00:00) Going JavaScript-free with the new Invoker Command API!. Retrieved from https://www.scien.cx/2025/08/25/going-javascript-free-with-the-new-invoker-command-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.