Home TecnologíaAPI Invoker Commands HTML: Botones Interactivos sin JavaScript

API Invoker Commands HTML: Botones Interactivos sin JavaScript

by Editor de Tecnologia

La API de Comandos Invoker de HTML ha alcanzado soporte básico en todos los navegadores principales, con Safari 26.2 completando la implementación tras lanzamientos anteriores en Chrome 135 y Firefox 144. Esta funcionalidad introduce controles de botón declarativos que eliminan la necesidad de JavaScript al trabajar con popovers, diálogos y otros elementos interactivos.

La API de Comandos Invoker añade dos nuevos atributos a los elementos botón: commandfor y command. El atributo commandfor recibe el ID del elemento a controlar, mientras que command especifica la acción a realizar. Este enfoque declarativo permite a los desarrolladores crear componentes interactivos sin escribir listeners de eventos o esperar a que JavaScript se descargue y ejecute, mejorando la interactividad inicial de la página.

Los comandos integrados admiten operaciones comunes para popovers y diálogos. Para popovers, los desarrolladores pueden utilizar los comandos toggle-popover, show-popover y hide-popover. Los diálogos admiten los comandos show-modal y close. A continuación, se muestra un ejemplo de implementación declarativa de un popover:




Popover content

La API también permite comandos personalizados, que deben tener como prefijo dos guiones, de forma similar a las propiedades personalizadas de CSS. Los desarrolladores pueden escuchar estos comandos utilizando el evento command y comprobar el nombre del comando en el objeto del evento. Esto permite a los autores de componentes crear APIs declarativas para sus componentes web sin necesidad de que los consumidores escriban JavaScript.

Un artículo en Medium describió la API como la API más interesante que aún no estás utilizando y expresó entusiasmo que los invokers permiten que tus botones realmente hagan cosas sin JavaScript.

leer más  Sophie Adenot: Primera francesa en el espacio en 25 años

El desarrollador Pawel Grzybek señaló que cada vez que la web lanza nuevas funcionalidades que nos permiten trasladar la implementación hacia la izquierda en la pila, me emociona, describiendo la API como mover la implementación de los controladores de clics de los botones hacia arriba en el HTML.

En otro lugar, CSS-Tricks observó que los comandos personalizados dependen de atributos de controladores de eventos HTML, señalando esto puede ser un poco (o definitivamente mucho) controvertido ya que el uso de atributos de controladores de eventos HTML se considera una mala práctica.

Para los desarrolladores que actualmente utilizan los atributos popovertarget y popovertargetaction, la API de Comandos Invoker proporciona un enfoque más unificado. Los popovers ahora pueden utilizar los atributos específicos de popover existentes o los nuevos atributos command y commandfor, lo que permite una migración gradual.

En comparación con bibliotecas como HTMX, que proporcionan controles declarativos a través de atributos personalizados, los Comandos Invoker ofrecen una funcionalidad similar como una característica nativa de la plataforma. El explainer de Open UI señala que, si bien el lanzamiento inicial se centra en popovers y diálogos, el soporte para elementos adicionales como

se pospuso, pero podría agregarse en iteraciones futuras.

La API de Comandos Invoker está definida en la especificación HTML de WHATWG y representa un esfuerzo continuo para reducir las dependencias de JavaScript para patrones interactivos comunes. Al permitir a los desarrolladores crear componentes interactivos de forma declarativa, la API mejora tanto la experiencia del desarrollador como la del usuario a través de cargas iniciales de página más rápidas y un marcado más accesible.

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.