Uso de Templates en Componentes Web con JavaScript

La API template nos permite conectar un web component de forma más profesional y organizada. También nos ayuda a clonar los elementos fácilmente. Como vimos en la clase anterior, el elemento no se clonaba, sino que se pasaba de etiqueta en etiqueta hasta la última en ser renderizada.

La etiqueta <template>

Template es una etiqueta que nos sirve como contenedor de código. Todo lo que escribamos adentro de esta etiqueta no se va a renderizar, sino que hay que activarlo mediante JavaScript. El profesor, sin embargo, no muestra cuál es dicho proceso y procede a utilizar una forma distinta. En el siguiente enlace vas a ver cómo se activa desde JS.

Escribir y activar el código dentro de la clase

De esta forma estamos armando toda la estructura HTML dentro de JavaScript, pero insertándola en la clase y fraccionando el HTML y CSS para más placer.

En este caso, creamos la clase, con su extensión y constructor, luego creamos un método que contendrá la estructura HTML (getElement). Adentro insertamos la variable template que contiene la estructura.

getTemplate() {
        const template = document.createElement('template');
       	template.innerHTML = `
		...(codigo HTML)
	`
}

Cómo clonar Elementos

Para clonar el código debemos indicar mediante el método cloneNode que se puede clonar. Para eso invocamos el contenido de getTemplate y lo anidamos a la clase (que luego al ser invocada en el HTML se convierte en la etiqueta misma)

render() { this.appendChild(this.getTemplate().content.cloneNode(true)) }

Paso final

Invocamos el render

render() { this.appendChild(this.getTemplate().content.cloneNode(true)) }
	`
}

connectedCallback() { this.render(); }

Contribución creada con los aportes de: Nazareno Aznar Altamiranda.