v135 · html

Settings Panel

Four toolbar buttons — Account, Preferences, Share, and Help — each with a different command value driving a <dialog> or [popover] target. Not a single click listener on any button. command/commandfor replaces the entire event-delegation layer for UI chrome like settings panels.

Feature detection: checking…
myapp
↑ Click any toolbar button — each opens via commandfor, no JS click handler
Account
Preferences
Share
Keyboard shortcuts
Ctrl + , Open Preferences
Ctrl + Shift + A Account settings
Ctrl + Shift + S Share project
? Toggle this panel
Esc Close any dialog
Command event log
readyOpen a panel — all dialogs and the popover use commandfor, no click handlers.
Before: click listener per button
Each toolbar button needed its own click listener, a reference to the target element, and a call to showModal() or showPopover(). Three buttons = three listeners, three DOM queries, three branches of wiring code.
After: commandfor + command, zero JS
commandfor="dlg-account" + command="show-modal" is the complete wiring. The browser invokes showModal() on the target element. Same for close, toggle-popover, and hide-popover. The event log uses JS only for observability — not for operation. 
<!-- Toolbar button — no onclick, no addEventListener -->
<button commandfor="dlg-account" command="show-modal">Account</button>

<!-- Target dialog -->
<dialog id="dlg-account">
  <!-- Close button uses the same command pattern -->
  <button commandfor="dlg-account" command="close">✕</button>
  …
</dialog>

<!-- Popover (non-modal) -->
<button commandfor="shortcuts-pop" command="toggle-popover">Help</button>
<div id="shortcuts-pop" popover>…</div>

/*
  Built-in commands:
    show-modal     → element.showModal()
    close          → element.close()
    show-popover   → element.showPopover()
    hide-popover   → element.hidePopover()
    toggle-popover → element.togglePopover()
    show-picker    → input.showPicker()
*/

see also