HTML <template>

Elemento <template>

Es un contenedor HTML que no será mostrado cuando la página esté cargada; sino solamente cuando una orden desde JS lo determine:

En otras palabras, aunque ubiquemos un contenedor <template> dentro del cuerpo HTML, este no se mostrará. Ojo como el contenedor tiene insertado un identificador id=".."

También se debe recordar que solo el contenido entre las etiquetas <template> es lo que se mostrará según lo codificado en Js.

En el ejemplo de arriba se adjuntó el contenido de <template> justo debajo de elemento 'div'. El elemento anidado en forma de hijo tomó el mismo estilo que el botón.

Sin embargo, el código entiende que a cada clic, el contenido de <template> debe ser mostrado; es decir, con 20 clics, 20 veces se mostrará. Ese comportamiento será un error cuando el usuario no sepa las causas de esa repetición constante. Eso se solucionaría de la siguiente forma:

En el ejemplo de arriba ahora un clic da una respuesta (mostrar el contenido que estaá oculto en la etiqueta <template>. Sin embargo, ese evento no puede ser revertido. Lo que también es un evento confuso para el usuario.

Ahora, en el ejemplo de abajo: Luego de cada click se mostrará solo una vez el contenido de <template>; y luego, cliquear de nuevo, el contenido se ocultará. Eso se resolvió agregando una estructura de condicionales dentro del eventListener. Lo que permite alternar la presencia del contenido que <template> esta ocultando.

La estructura base de la condicional dentro del eventListener fue:

En Javascript

var estadoVisible = false;
var btn = document.querySelector(".btn");
var contentContainer = document.querySelector("#contentContainer");

btn.addEventListener("click", function(){
    if (estadoVisible) {
    console.log("Clic para ocultar");
    estadoVisible = false;
    } else {
    console.log("Click para mostrar");
    // If anidado
    if (contentContainer) {
    console.log("Contenedor lleno");
    estadoVisible = true;
    }
// Cierra primer If
}
// Cierra eventListener("", function(){});
});

BIBLIOGRAFÍA:

[1] Responsive Web Design with HTML5 and CSS Ben Frain. Ediciones Packt

[2] MDN Web Docs, CSS. Mozilla Foundation.

[3] W3C. JavaScript HTML DOM Navigation