Command Toast

A dismissible toast/confirmation card wired entirely with the new HTML Invoker Commands API — the `command`/`commandfor` attribute pair on a <button>, pointing at the popover it controls (`command="show-popover"` / `command="hide-popover"`) — with genuinely zero JavaScript: no event listener, no <script> tag, no addEventListener at all, not even a fallback one. This is a real step further than this catalog's own 'Anchor Popover Menu' entry (which still uses the older popovertarget attribute, show/toggle/hide only) and its own 'Native Dialog Modal' entry (which needed a real try/catch JS fallback for this very sandboxed preview) — here the browser itself owns the whole open/close wiring, natively, with no script execution path at all. Real, current (2025/2026), sourced via WebSearch, cross-checked across multiple independent sources (InfoQ's 'HTML Invoker Commands Achieve Baseline Support across All Major Browsers', January 2026; HTMHell's December 2025 advent-calendar piece 'Controlling dialogs and popovers with the Invoker Commands API'; webinista.com's 'command and commandfor: the Invoker Commands API'; and independent write-ups on openreplay.com, dev.to, and utilitybend.com), all agreeing on the same version numbers: CommandEvent/command/commandfor shipped in Chrome/Edge 135, then Firefox 144, with Safari 26.2 completing the rollout across all four major engines — genuinely Baseline now, not merely Chromium-only or single-engine like most of this catalog's other recent entries. Built-in command values used here are show-popover and hide-popover (toggle-popover, show-modal, close, and request-close also ship, for other elements); custom commands (prefixed `--`) exist too but still need a real `command` event listener in JS, so they're a different, more JS-ish use case than the zero-script one demonstrated here. **Honest limitation, stated plainly rather than glossed over:** unlike several other entries in this catalog, there is no CSS `@supports` feature query that can detect an HTML attribute like `command`/`commandfor` — a browser predating the versions above simply treats the button as a plain, inert `<button type="button">` that does nothing on click (safe, never broken, never throws, just silent), rather than degrading into some visible fallback state. Given all four current major engines now ship it per the dates above, this gap only matters for genuinely out-of-date browser versions. No WebGL, no scroll-jacking — a strong DIY-tier fit, arguably the cleanest zero-JS fit in this whole catalog so far. (Vanilla example: live iframe preview + HTML/CSS tabs, no JS tab at all — click 'Show toast', then the × to dismiss.)

<div class="cmd-wrap">
  <button class="cmd-show" command="show-popover" commandfor="cmd-toast" type="button">Show toast</button>
  <div class="cmd-toast" id="cmd-toast" popover>
    <span class="cmd-msg">Saved — zero JavaScript, zero event listeners.</span>
    <button class="cmd-close" command="hide-popover" commandfor="cmd-toast" type="button" aria-label="Dismiss">×</button>
  </div>
</div>