Invoker commands

Wow, you can now control a <dialog> just using attributes, no JavaScript required! This feels like cheating, so good, a declarative dialog with so little work to do.

Markup

<button commandfor="cool-dialog" command="show-modal">Open</button>
<dialog id="cool-dialog">
	<h2>Cool dialog</h2>
	<p>No JavaScript required!</p>
	<button commandfor="cool-dialog" command="close">Close</button>
</dialog>

Show dialog

Commandfor

In the html above the dialog has an id attribute of cool-dialog. Each button has a commandfor attribute whose value is the same as the dialog’s id attribute value. This creates a relationship between the elements.

Commands

The command attribute on the button elements indicate what behaviour to apply to the dialog when invoked. Note that the values for command are built in to the platform, these behaviours map to their JavaScript equivalents.

For this example we will use the show-modal and close commands to control the dialog.

• show-modal: declarative equivalent of calling the HTMLDialogElement.showModal() method on the <dialog> element.
• close: declarative equivalent of calling the HTMLDialogElement.close() method on the <dialog> element.

Cool dialog

No JavaScript required!

Close

Sources

See css-wrapped-2025 and MDN for more information.