command / commandfor — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 <code>command</code> / <code>commandfor</code></h1>
    <p class="pg-sub">
      Every button below opens or closes something. None of them has a <code>click</code> listener
      attached by this file's JavaScript — open devtools and check the Event Listeners panel if you
      don't believe it. The one exception is labelled, and it's the whole point.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> A dialog, zero JS</div>
      <div class="btn-row">
        <button class="btn primary" command="show-modal" commandfor="pg-dialog">Open confirm dialog</button>
      </div>
      <p class="hint">
        <span class="attr-tag">command="show-modal"</span> <span class="attr-tag">commandfor="pg-dialog"</span>
        — that's the entire mechanism. The browser finds <code>#pg-dialog</code> and calls the
        equivalent of <code>.showModal()</code> on click.
      </p>
    </div>

<dialog id="pg-dialog" class="pg-dialog">
      <p style="margin-top:0">Delete this account? This can't be undone.</p>
      <div class="btn-row">
        <button class="btn bad" command="request-close" commandfor="pg-dialog">Yes, delete</button>
        <button class="btn ghost" command="close" commandfor="pg-dialog">Cancel</button>
      </div>
    </dialog>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> A popover, same two attributes</div>
      <div class="btn-row">
        <button class="btn" command="toggle-popover" commandfor="pg-popover">Toggle info popover</button>
        <div id="pg-popover" popover class="pg-popover">
          <strong>Same family as dialogs now.</strong><br />
          <code>show-popover</code> / <code>hide-popover</code> / <code>toggle-popover</code> map onto the
          exact three actions <code>popovertargetaction</code> already had.
        </div>
      </div>
      <p class="hint">The target still needs its own <code>popover</code> attribute — <code>commandfor</code> just gives dialogs and popovers one shared vocabulary instead of two separate APIs.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> A custom command — this one needs a listener</div>
      <p class="hint">
        Built-ins need no JavaScript. Anything prefixed <span class="attr-tag">--</span> is yours to invent —
        it fires a <code>command</code> event on the target, and <em>that</em> needs one small handler.
      </p>
      <ul class="pg-notif-list" id="notif-list">
        <li id="notif-1"><span>New comment on your post</span><button class="btn sm" command="--mark-read" commandfor="notif-1">Mark read</button></li>
        <li id="notif-2"><span>Someone followed you</span><button class="btn sm" command="--mark-read" commandfor="notif-2">Mark read</button></li>
        <li id="notif-3"><span>Your build passed</span><button class="btn sm" command="--mark-read" commandfor="notif-3">Mark read</button></li>
      </ul>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> What just happened</div>
      <div class="status" id="status">
        <span class="dot info" id="dot"></span><span id="statusText">Click something above.</span>
      </div>
      <div class="log" id="log" style="margin-top:10px">Waiting for your first click…</div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn ghost sm" id="reset">Reset demo</button>
      </div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.