Invoker Commands (commandfor / command)

Définition

Attributs qui donnent à un <button> un comportement déclaratif sur un élément cible : commandfor (id de la cible) et command (toggle-popover, show-modal, close…). Les commandes personnalisées commencent par -- et déclenchent un événement command. Baseline « Newly available » depuis décembre 2025.

Analogie

Une télécommande avec des boutons étiquetés : « ouvrir », « fermer », sans câbler chaque fil soi-même.

Exemple de code

<button commandfor="dlg" command="show-modal">Ouvrir</button>
<dialog id="dlg">
  <button commandfor="dlg" command="close">Fermer</button>
</dialog>

<button commandfor="photo" command="--rotate">Pivoter</button>
<img id="photo" src="photo.jpg" alt="">
<script>
  photo.addEventListener('command', (e) => {
    if (e.command === '--rotate') photo.style.rotate = '90deg';
  });
</script>

Cas d'usage

Ouvrir modales et popovers sans JavaScript, et brancher des actions maison via un seul écouteur command.

Anti-pattern

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API