Invocadores HTML: La API Más Genial Que Aún No Estás Usando
Los invocadores son la API HTML más genial que no estás usando. Esto está a punto de llegar a todos los navegadores principales. Ya está disponible en Safari Technology Preview y en Firefox y Chrome. Es muy genial.
Entonces, ¿qué son los invocadores?
La Gran Idea
Los invocadores permiten que tus botones hagan cosas sin JavaScript. En absoluto. Solo le dices al botón qué elemento controlar y qué hacer con él. Eso es todo.
Es increíble que esto no haya existido hasta ahora.
Enlace para audiencia gratuita (no miembros)
Aquí están los ejemplos de código exactos:
Cómo Lo Hemos Estado Haciendo (La Forma Antigua)
Ahora mismo, si quieres que un botón abra un diálogo, estás escribiendo código como este:
const button = document.querySelector('#open-button');
const dialog = document.querySelector('#my-dialog');
button.addEventListener('click', () => {
dialog.showModal();
});
Funciona, pero vamos. Eso es demasiada ceremonia para “botón abre cosa”.
Cómo Funcionan Los Invocadores (La Nueva Forma)
Añades dos atributos a tu botón, y listo:
<button commandfor="my-dialog" command="show-modal">
Open Dialog
</button>
<dialog id="my-dialog">
<h2>Welcome!</h2>
<p>This dialog opened without a single line of JavaScript.</p>
<button commandfor="my-dialog" command="close">
Close This
</button>
</dialog>
Eso es. El botón simplemente sabe qué hacer. Sin archivo JavaScript. Sin escuchadores de eventos, sin consultar el DOM. Es hermoso.
Un Ejemplo del Mundo Real
Aquí hay algo que realmente construirías — un menú de configuración con un popover:
<button commandfor="settings-menu" command="toggle-popover">
⚙️ Settings
</button>
<div id="settings-menu" popover>
<h3>Settings</h3>
<label>
<input type="checkbox"> Dark Mode
</label>
<label>
<input type="checkbox"> Notifications
</label>
<label>
<input type="checkbox"> Auto-save
</label>
<button commandfor="settings-menu" command="hide-popover">
Done
</button>
</div>
Haz clic en el botón de configuración, el menú aparece. Haz clic en Listo, se cierra. Cero JavaScript requerido. Esto solía tomar 20+ líneas de código.
Los Atributos
Hay dos atributos que hacen que esta magia suceda:
commandfor - Esto apunta al ID de lo que quieres controlar. Entonces, si quieres controlar un diálogo con id="my-dialog", escribes commandfor="my-dialog".
command - Esto es lo que quieres que suceda. Como show-modal para abrir un diálogo, o close para cerrarlo, o toggle-popover para popovers.
Eso es literalmente todo lo que necesitas saber.
Lo Que Puedes Controlar
Ahora mismo, puedes controlar:
Diálogos: show-modal y close funcionan directamente. Finalmente.
Popovers: show-popover, hide-popover, y toggle-popover. Muy limpio.
Elementos Details: open, close, y toggle para contenido estilo acordeón.
Y están añadiendo más. Entradas de archivo, controles de video, todo eso viene.
Los Comandos Personalizados También Son Geniales
Puedes inventar tus propios comandos. Solo necesitan comenzar con dos guiones:
<button commandfor="photo" command="--flip-horizontal">
Flip Photo
</button>
<button commandfor="photo" command="--rotate-90">
Rotate 90°
</button><img id="photo" src="vacation.jpg" alt="Beach photo">
Luego escribes un pequeño JavaScript para escuchar estos comandos personalizados y hacer lo que quieras:
document.getElementById('photo').addEventListener('command', (e) => {
if (e.command === '--flip-horizontal') {
e.target.style.transform = 'scaleX(-1)';
} else if (e.command === '--rotate-90') {
e.target.style.transform = 'rotate(90deg)';
}
});
Pero toda la configuración de manejo de clics ya está hecha para ti, lo cual es agradable.
Otro Ejemplo Sólido: Galería de Imágenes
Aquí hay una galería de imágenes completa con botones siguiente/anterior:
<div class="gallery">
<button commandfor="gallery-dialog" command="show-modal">
📷 View Gallery
</button>
</div>
<dialog id="gallery-dialog">
<div class="gallery-content">
<img id="current-image" src="photo-1.jpg" alt="Gallery photo">
<div class="controls">
<button commandfor="current-image" command="--previous">
← Previous
</button>
<button commandfor="current-image" command="--next">
Next →
</button>
<button commandfor="gallery-dialog" command="close">
✕ Close
</button>
</div>
</div>
</dialog>
El diálogo se abre y cierra con comandos integrados. Los botones siguiente/anterior usan comandos personalizados que conectarías con algunas líneas de JavaScript. ¿Pero toda la mecánica de hacer clic en botones? Ya está manejada.
Soporte de Navegadores Ahora Mismo
Aquí está dónde están las cosas:
- Chrome Canary 134+ Activa la bandera experimental
- Firefox Nightly 135+ Habilita la bandera
- Safari Technology Preview Actívala
Por Qué Esto Es Realmente Un Gran Asunto
Mira, esto no está cambiando el mundo ni nada. Pero está arreglando algo que ha sido molesto durante años.
Los botones que controlan otros elementos es algo fundamental en la web. No deberíamos necesitar importar bibliotecas o escribir código repetitivo para ello. HTML debería simplemente manejarlo. Y ahora lo hace.
Además, cuando las cosas están integradas en la plataforma, la accesibilidad viene de forma gratuita. Los lectores de pantalla funcionan mejor con ello. La navegación por teclado simplemente funciona. No tienes que recordar añadir todos los atributos ARIA.
Hablando en Serio
Esta es una de esas características que te hace decir “espera, ¿esto no era ya una cosa?” Porque se siente tan obvio una vez que lo ves.
La plataforma web finalmente está alcanzando lo que hemos estado haciendo con frameworks de JavaScript durante años. Y eso es genial porque significa menos JavaScript para enviar, menos código para mantener, y sitios web que simplemente funcionan mejor.
Los invocadores son simples, son elegantes, y están a punto de estar en todas partes. Prepárate para eliminar un montón de escuchadores de eventos.
La Conclusión
Los Invocadores HTML permiten que los botones controlen cosas sin JavaScript. Dos atributos. Sin bibliotecas. Es limpio, es simple, y está llegando a navegadores cerca de ti.
Este es el tipo de mejora que hace que el desarrollo web sea un poco más divertido. Y honestamente, podríamos usar más de eso.
¿Aprendiste algo bueno hoy como desarrollador?
Entonces muestra algo de amor.
©Usman Writes
Desarrollador de WordPress | Estratega de Sitios Web | Especialista en SEO
No olvides suscribirte a Developer’s Journey para mostrar tu apoyo.
Escrito por Usman Writes
https://pixicstudio.medium.com/?source=post_page---post_author_info--e78c3ddee927
Hagamos que Internet sea menos aburrido de lo que ya es. https://www.linkedin.com/in/muhammad-usman-strategist/