Una Guía Rápida de la API de Comandos Invocadores

Si alguna vez has conectado un botón para abrir un elemento <dialog>, conoces el proceso: consultar el elemento, adjuntar un listener de clic, llamar a showModal(). Funciona, pero es código repetitivo que escribes una y otra vez. La API de Comandos Invocadores cambia esto al permitirte declarar esa relación directamente en HTML — sin necesidad de JavaScript para los casos más comunes.

A finales de 2025, la API de Comandos Invocadores ha alcanzado disponibilidad Baseline en Chrome/Edge, Firefox y Safari, lo que la convierte en una opción práctica para proyectos modernos. Puedes verificar la compatibilidad actual de navegadores en webstatus.dev o caniuse.com.

¿Qué Son los Atributos command y commandfor?

La API de Comandos Invocadores introduce dos atributos HTML en elementos <button>:

• commandfor — el id del elemento objetivo que deseas controlar
• command — la acción a realizar en ese objetivo cuando se activa el botón

Juntos, forman un enlace declarativo entre un botón invocador y su objetivo. Cuando se hace clic en el botón, se presiona mediante el teclado o se activa de otra manera, el navegador despacha un CommandEvent en el elemento objetivo y — para comandos integrados — ejecuta automáticamente el comportamiento correspondiente.

Importante: Siempre agrega type="button" a cualquier botón que use estos atributos. Sin él, los botones dentro de formularios tienen por defecto type="submit", lo que causa comportamientos inesperados.

Controlando Diálogos y Popovers con HTML

Aquí es donde la API ofrece el valor más inmediato. Anteriormente, controlar un elemento <dialog> requería JavaScript. Ahora puedes hacerlo de forma declarativa:

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

<dialog id="my-dialog">
  <p>Hello from the dialog!</p>
  <button type="button" commandfor="my-dialog" command="request-close">
    Close
  </button>
</dialog>

Sin JavaScript. El navegador maneja la colocación en la capa superior, el atrapamiento del foco y la restauración del foco cuando se cierra el diálogo.

Referencia de Comandos Integrados

Para popovers, esto cumple un propósito similar al antiguo atributo popovertarget. La API de Comandos Invocadores es un mecanismo más general para acciones declarativas de UI, pero los atributos originales de popover aún existen y siguen siendo compatibles. Consulta la guía de MDN sobre la API Popover para más detalles.

La Accesibilidad Está Integrada

Para comandos integrados, el navegador maneja automáticamente comportamientos clave de accesibilidad e interacción. Los comandos de diálogo se integran con el manejo nativo de <dialog> del navegador, incluyendo el comportamiento de capa superior y la restauración del foco cuando se cierra el diálogo. Estos comportamientos a nivel de plataforma ayudan a garantizar patrones de interacción consistentes y mejor accesibilidad sin requerir atributos ARIA adicionales.

Los Comandos Personalizados Aún Necesitan JavaScript

La API también admite comandos personalizados para tus propios componentes. Cualquier valor de command que comience con -- se trata como un comando personalizado. El navegador despacha un CommandEvent en el objetivo, y tu JavaScript maneja el resto:

<button type="button" commandfor="color-box" command="--toggle-highlight">
  Highlight
</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>

El prefijo -- es un espacio de nombres reservado — los navegadores garantizan que nunca lo usarán para comandos integrados, por lo que es seguro para uso personalizado. El CommandEvent expone tanto e.command (la cadena del comando) como e.source (el botón que lo activó), dándote todo lo que necesitas para actuar sobre el evento.

Conclusión

La API de Comandos Invocadores hace realidad el control declarativo de UI en HTML para los patrones más comunes. Usa comandos integrados para diálogos y popovers para obtener accesibilidad, gestión del foco y cero JavaScript de forma gratuita. Usa comandos personalizados -- cuando necesites comportamiento JavaScript pero quieras un patrón de conexión más limpio y declarativo. Es una API pequeña con un alcance claro — y eso es exactamente lo que la hace útil.

Preguntas Frecuentes

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.