Usar command y commandfor en lugar de addEventListener

Abrir un diálogo solía exigir addEventListener + showModal(). Desde diciembre de 2025, HTML lo resuelve con dos atributos declarativos, sin una sola línea de JavaScript.

Preview

<button command="show-modal" commandfor="remove-item-dialog">
  Remove item
</button>

<dialog id="remove-item-dialog">
  <p>This will permanently delete the item.</p>
  <button command="close" commandfor="remove-item-dialog">Keep item</button>
</dialog>

Qué son command y commandfor

command se coloca en un elemento invocable (button, input, select, textarea o un custom element) y declara qué acción ejecutar. commandfor apunta al id del elemento sobre el que se ejecuta esa acción — un <dialog>, un popover, etc.

En el ejemplo de arriba, el botón con command="show-modal" abre el diálogo referenciado por commandfor="remove-item-dialog"; el botón dentro del diálogo lo cierra con command="close".

Antes vs. ahora

Antes necesitabas JavaScript para abrir y cerrar el diálogo:

const dialog = document.querySelector("#remove-item-dialog");
document.querySelector("[data-remove]").addEventListener("click", () => {
  dialog.showModal();
});

Ahora los atributos hacen el trabajo y el navegador se encarga del resto:

<button command="show-modal" commandfor="remove-item-dialog">Remove item</button>

Valores de command

El atributo command sin commandfor se aplica al elemento invocable mismo; con commandfor, al elemento referenciado.