El elemento HTML dialog: qué es y cómo podemos utilizarlo

Entre otras novedades de HTML 5.2, una de las más destacadas es el elemento HTML dialog que, aunque ya lo conocíamos de antes, ha pasado por fin a formar parte de la recomendación oficial. Aunque es bastante sencillo de utilizar, existen algunas características que son fáciles de pasar por algo.

El atributo open

Este elemento incluye todos los atributos globales (id, class, hidden, style, etc), menos tabindex.
Además, añade un nuevo atributo propio, open. ¿En qué consiste?
Gracias a este atributo, podremos indicar si el diálogo está activo y el usuario puede interactuar con él. Es un atributo booleano, por lo que, si no está asignado, no deberá mostrarse al usuario, y permanecerá oculto hasta que se cambie esta propiedad mediante JavaScript.

Estilos

A continuación podemos ver el ejemplo más básico que podemos crear del elemento dialog.
<dialog>¡Soy un cuadro de diálogo!</dialog>
Por lo general, si no añadimos ningún estilo, por defecto tendrá el siguiente aspecto:

Este elemento tiene una posición absoluta en la página (mediante la propiedad position: absolute; en CSS), por lo que aparecerá frente a otros elementos, centrado horizontalmente. Si hacemos uso de las DevTools, veremos que los estilos asignados por defecto, que en este caso son:

Añadir estilos es tan simple como con cualquier otro elemento. Además podemos aplicarlos al fondo mediante el pseudo-elemento ::backdrop.

dialog::backdrop {
 background-color: rgba(0, 0, 0, 0.7);
}

Operaciones básicas

Gracias a JavaScript, contamos con diversos métodos y propiedades para facilitar el trabajo con el elemento HTML dialog. Entre los métodos más utilizados se encuentran showModal() y close().
¿Recuerdáis que antes hablábamos sobre la propiedad open? Con estos métodos podemos manipular el valor de dicha propiedad.

const aviso = document.getElementById('aviso');

// Muestra el dialog (añadiendo el atributo open)
aviso.showModal();

// Oculta el dialog (eliminando el atributo open)
aviso.close();

Cuando utilizamos JavaScript para mostrar el dialog, podremos ver que se añade un fondo a la página, cuando está visible. Este fondo es el que podemos personalizar con el pseudo-elemento backdrop.