HTML
details, summary, dialog y popover
Componentes interactivos nativos para contenido desplegable, diálogos y capas temporales mediante details, summary, dialog y popover.
- Última actualización
- Actualizada
- Nivel
- Aplicación
HTML
Componentes interactivos nativos para contenido desplegable, diálogos y capas temporales mediante details, summary, dialog y popover.
WNC0
summary es el control que abre y cierra el contenido.
Debe ser el primer summary hijo. Si se omite, el navegador puede generar una etiqueta predeterminada poco específica.
WNC1 Define estado inicial abierto. Es booleano: open="false" continúa abierto.
JavaScript puede escuchar toggle para responder al cambio.
WNC2
WNC3
En navegadores compatibles, compartir name permite que solo uno del grupo permanezca abierto.
Comprueba soporte objetivo y no ocultes información esencial detrás de interacciones innecesarias.
Tiene comportamiento propio ligado al details. No anides buttons o links dentro si crean objetivos interactivos conflictivos.
Texto claro:
<summary>Ver requisitos técnicos</summary><dialog id="confirm-dialog">
<h2>Eliminar proyecto</h2>
<p>Esta acción no se puede deshacer.</p>
...
</dialog>Por sí solo no está abierto.
dialog.show();Se muestra sin bloquear el resto del documento.
dialog.showModal();Entra al top layer, gestiona backdrop y vuelve inert el contenido exterior según el navegador.
No simules apertura añadiendo solo open cuando necesitas comportamiento modal.
dialog.close("confirm");Puede establecer returnValue.
Formulario:
<dialog>
<form method="dialog">
<button value="cancel">Cancelar</button>
<button value="confirm">Confirmar</button>
</form>
</dialog>El submit cierra sin solicitud de red.
Un modal necesita una forma clara de cerrar, normalmente button visible y Escape cuando no existe una razón crítica para impedirlo.
El evento cancel permite controlar el cierre por Escape.
Al abrir, el navegador aplica reglas de foco. Define contenido en orden lógico y evita autofocus salvo que un control sea claramente el primer paso.
Para mensajes o confirmaciones, enfocar el botón menos destructivo o el heading puede ser más seguro que la acción peligrosa.
Al cerrar, devuelve foco al control que abrió el diálogo.
dialog::backdrop {
background: rgb(0 0 0 / 0.6);
}No dependas solo del backdrop para comunicar modalidad. El contenido necesita heading, propósito y acciones claras.
<button popovertarget="project-menu">
Opciones
</button>
<div id="project-menu" popover>
...
</div>El navegador gestiona top layer, light dismiss y relaciones de activación para casos comunes.
<div popover="auto">...</div>
<div popover="manual">...</div>auto: light dismiss y exclusión con otros auto popovers según reglas.manual: se controla explícitamente y no cierra automáticamente igual.El valor vacío equivale al estado auto.
<button
popovertarget="filters"
popovertargetaction="toggle"
>
Filtros
</button>Acciones posibles incluyen show, hide o toggle según soporte.
JavaScript también puede usar showPopover, hidePopover y togglePopover.
popover controla presentación y top layer, pero no decide si el contenido es menu, tooltip, dialog o región genérica.
Elige semántica según el contenido y no añadas role="menu" a una lista de links de navegación sin implementar el patrón menu.
Un tooltip debe aparecer mediante hover y foco, no contener interacción y poder descartarse/permanecer según requisitos de accesibilidad.
Popover puede ayudar a presentación, pero todavía necesitas nombre/description y comportamiento apropiado.
Dialog modal → requiere decisión o interacción enfocada; bloquea el resto
Popover → contenido ligero relacionado; suele permitir light dismiss
Details → contenido inline expandible en el flujoNo uses modal para información que podría ser un details o popover simple.
Dialog modal y popover pueden entrar a una capa superior que evita muchos problemas de z-index y clipping.
Eso no corrige automáticamente tamaño, scroll interno, foco visible o contenido fuera del viewport.
<button
type="button"
popovertarget="contact-options"
>
Contactar
</button>
<div id="contact-options" popover>
<ul>
<li><a href="mailto:hello@example.com">Correo</a></li>
<li><a href="https://linkedin.com/in/example">LinkedIn</a></li>
</ul>
</div>No necesita role menu si funciona como un pequeño grupo de enlaces normales.
open="false" esperando cerrar.open a dialog y creer que es modal.¿Por qué agregar open a un dialog no equivale a llamar showModal()?
Porque solo lo muestra; no lo coloca como modal en el top layer ni aplica el comportamiento de inert/foco del resto del documento.
script, noscript, modules e import maps explica cómo HTML carga código y se relaciona con el parser.