No Necesitas JS Para Eso
English
09 · Invoker

Invoker

Botones que controlan elementos sin JS

Chrome 130+ · experimental
← Índice

commandfor + command

Un <button commandfor="id" command="..."> controla un popover o diálogo sin onclick.

<button commandfor="x" command="toggle-popover">

Comandos nativos

toggle-popover, show-popover, hide-popover para popovers; show-modal y close para diálogos.

command="show-modal" · "close" · "toggle-popover"

Sin JS

Antes necesitabas addEventListener + .showPopover() o .showModal(). Ahora es un atributo HTML.

Popover via Invoker

Este popover se abrió con commandfor + command="toggle-popover", sin JS.

Diálogo modal via Invoker

Se abrió con command="show-modal". Animado entrada y salida con @starting-style + overlay/display allow-discrete.

html
<!-- popover: sin onclick, sin addEventListener -->
<button commandfor="inv-pop" command="toggle-popover">
  Abrir popover
</button>

<!-- diálogo modal -->
<button commandfor="inv-dialog" command="show-modal">
  Abrir diálogo
</button>

<div popover id="inv-pop">...</div>
<dialog id="inv-dialog">...</dialog>

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.