Wenn man möchte, dass ein <button> nicht nur hübsch aussieht, sondern auch etwas tut wenn man darauf klickt, kommt oft JavaScript ins Spiel:
<button onClick="document.querySelector('#the-dialog').showModal();">
Show the dialog
</button>
<dialog id="the-dialog">
<p>Hello there</p>
</dialog>
Für bestimmte häufige Fälle gibt es seit einigen Monaten einen kürzeren Weg:
<button commandfor="the-dialog" command="show-modal">Show the dialog</button>
<dialog id="the-dialog">
<p>Hello there</p>
</dialog>
Diese sogenannten Invoker Commands sind seit Ende 2025 in der Baseline verfügbar. Als Auslöser wird aktuell nur <button> unterstützt. Das Attribut commandfor enthält die ID des Elements, das das Kommando empfangen soll, in unserem Beispiel dialog#the-dialog. Und das Attribut command enthält entsprechend das Kommando.
Hier sind eine Handvoll Kommandos vordefiniert, neben show-modal beispielsweise auch close (schließe einen Dialog) oder toggle-popover (schalte ein Popover um zwischen sichtbar und verborgen). Außerdem kann man einen beliebigen Wert übergeben, wenn man zwei Minuszeichen voranstellt:
<button commandfor="my-carousel" command="--rotate-right"></button>
In diesem Fall muss #my-carousel' auf ein entsprechendes command`-Event lauschen und auf geeignete Weise darauf reagieren.
