Invoker Commands
Overview
For decades, buttons could only do one native thing: submit forms. If you wanted a button to open a modal, clear an input, or play a video, you had to write JavaScript event listeners. The modern Invoker API fundamentally changes this. By using the command attribute, you can explicitly tell a button to natively execute actions on other elements in the DOM—zero JavaScript required.
Syntax
<!--
Modern 2026 Invoker API syntax.
Command target specifies the ID of the element to interact with.
Command specifies the exact native action to take.
-->
<!-- Natively open a dialog -->
<button command="show-modal" commandfor="my_modal">
Open Modal
</button>
<dialog id="my_modal">
<p>Hello World</p>
<!-- Natively close it -->
<button command="close" commandfor="my_modal">Close</button>
</dialog>
<!-- Natively play a video -->
<video id="promo" src="video.mp4"></video>
<button command="play" commandfor="promo">Play Video</button>Common Pitfalls
Using invoker commands in legacy environments. Because this is a bleeding-edge web standard, older enterprise environments (like outdated Safari versions or old enterprise Chromium builds) may not support it, requiring JavaScript fallbacks (polyfills).
Using invalid commands. The
commandattribute only accepts strict, natively recognized string values (likeshow-modal,close,play,pause,toggle-popover).
Interview Questions
How do Invoker Commands drastically improve application security (Content Security Policy)?
By executing actions natively via HTML attributes instead of inline Javascript (onclick="..."), you can enforce much stricter Content Security Policies (CSP) that outright ban inline scripts, neutralizing major XSS vulnerabilities.
Real-World Example
A fully functional, JavaScript-free custom video player interface.
<div class="video-player">
<video id="main_video" src="/media/movie.mp4"></video>
<div class="controls">
<button command="play" commandfor="main_video">Play</button>
<button command="pause" commandfor="main_video">Pause</button>
<button command="toggle-muted" commandfor="main_video">Mute</button>
</div>
</div>Check Your Knowledge
Test your understanding of Invoker Commands with these quick questions.