Eine kurze Einführung in die Invoker Commands API

Wenn Sie schon einmal einen Button mit einem <dialog>-Element verknüpft haben, kennen Sie das Prozedere: Element abfragen, Click-Listener anhängen, showModal() aufrufen. Es funktioniert, aber es ist Boilerplate-Code, den Sie immer wieder schreiben. Die Invoker Commands API ändert das, indem sie es Ihnen ermöglicht, diese Beziehung direkt in HTML zu deklarieren – für die gängigsten Anwendungsfälle ist kein JavaScript erforderlich.

Ende 2025 hat die Invoker Commands API Baseline-Verfügbarkeit in Chrome/Edge, Firefox und Safari erreicht, was sie zu einer praktikablen Wahl für moderne Projekte macht. Den aktuellen Browser-Support können Sie auf webstatus.dev oder caniuse.com prüfen.

Was sind die Attribute command und commandfor?

Die Invoker Commands API führt zwei HTML-Attribute für <button>-Elemente ein:

• commandfor – die id des Zielelements, das Sie steuern möchten
• command – die Aktion, die auf diesem Ziel ausgeführt werden soll, wenn der Button aktiviert wird

Zusammen bilden sie eine deklarative Verknüpfung zwischen einem auslösenden Button und seinem Ziel. Wenn der Button geklickt, per Tastatur gedrückt oder anderweitig aktiviert wird, löst der Browser ein CommandEvent auf dem Zielelement aus und führt – bei eingebauten Befehlen – das entsprechende Verhalten automatisch aus.

Wichtig: Fügen Sie jedem Button, der diese Attribute verwendet, immer type="button" hinzu. Ohne diese Angabe haben Buttons innerhalb von Formularen standardmäßig type="submit", was zu unerwartetem Verhalten führt.

Steuerung von Dialogen und Popovers mit HTML

Hier liefert die API den unmittelbarsten Mehrwert. Früher erforderte die Steuerung eines <dialog>-Elements JavaScript. Jetzt können Sie es deklarativ tun:

<button type="button" commandfor="my-dialog" command="show-modal">
  Dialog öffnen
</button>

<dialog id="my-dialog">
  <p>Hallo aus dem Dialog!</p>
  <button type="button" commandfor="my-dialog" command="request-close">
    Schließen
  </button>
</dialog>

Kein JavaScript. Der Browser übernimmt die Top-Layer-Platzierung, das Fokus-Trapping und die Fokus-Wiederherstellung beim Schließen des Dialogs.

Referenz der eingebauten Befehle

Für Popovers erfüllt dies einen ähnlichen Zweck wie das ältere popovertarget-Attribut. Die Invoker Commands API ist ein allgemeinerer Mechanismus für deklarative UI-Aktionen, aber die ursprünglichen Popover-Attribute existieren weiterhin und werden nach wie vor unterstützt. Details finden Sie im MDN-Leitfaden zur Popover API.

Barrierefreiheit ist integriert

Bei eingebauten Befehlen übernimmt der Browser automatisch wichtige Barrierefreiheits- und Interaktionsverhalten. Dialog-Befehle integrieren sich in die native <dialog>-Handhabung des Browsers, einschließlich Top-Layer-Verhalten und Fokus-Wiederherstellung beim Schließen des Dialogs. Diese Plattform-Level-Verhaltensweisen tragen dazu bei, konsistente Interaktionsmuster und bessere Barrierefreiheit zu gewährleisten, ohne dass zusätzliche ARIA-Attribute erforderlich sind.

Benutzerdefinierte Befehle benötigen weiterhin JavaScript

Die API unterstützt auch benutzerdefinierte Befehle für Ihre eigenen Komponenten. Jeder command-Wert, der mit -- beginnt, wird als benutzerdefinierter Befehl behandelt. Der Browser löst ein CommandEvent auf dem Ziel aus, und Ihr JavaScript übernimmt den Rest:

<button type="button" commandfor="color-box" command="--toggle-highlight">
  Hervorheben
</button>
<div id="color-box"></div>

<script>
  document.getElementById('color-box').addEventListener('command', (e) => {
    if (e.command === '--toggle-highlight') {
      e.target.classList.toggle('highlighted');
    }
  });
</script>

Das Präfix -- ist ein reservierter Namensraum – Browser garantieren, dass sie ihn niemals für eingebaute Befehle verwenden werden, sodass er sicher für benutzerdefinierte Verwendung ist. Das CommandEvent stellt sowohl e.command (den Befehlsstring) als auch e.source (den Button, der ihn ausgelöst hat) bereit und gibt Ihnen alles, was Sie benötigen, um auf das Event zu reagieren.

Fazit

Die Invoker Commands API macht deklarative UI-Steuerung in HTML für die gängigsten Muster zur Realität. Verwenden Sie eingebaute Befehle für Dialoge und Popovers, um Barrierefreiheit, Fokus-Management und null JavaScript kostenlos zu erhalten. Verwenden Sie benutzerdefinierte ---Befehle, wenn Sie JavaScript-Verhalten benötigen, aber ein saubereres, deklarativeres Verknüpfungsmuster wünschen. Es ist eine kleine API mit einem klaren Anwendungsbereich – und genau das macht sie nützlich.

Häufig gestellte Fragen (FAQs)

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.