command / commandfor

A dialog opened with no script at all

CaveatThe built-in command names are fixed and hyphenated, so it is show-modal, close, request-close or toggle-popover, and a typo is silently ignored rather than reported. Anything of your own has to start with two dashes to be treated as a custom command, and inside a form the invoker still needs type="button" or it submits on the way.

FallbackAn older browser parses the attributes, ignores them, and gives you a button that does nothing at all, which is the one failure mode worse than a wrong colour. Until the support you need is there, keep a short click listener calling showModal() alongside and let the attribute take over where it is understood.

<button command="show-modal"
        commandfor="box">Open</button>

<dialog id="box">
  <button command="close"
          commandfor="box">Close</button>
</dialog>

dialog::backdrop { background: #0b0e14b8; }

Published 29 Sep 2026