En este post vas a poder visualizar en qué consiste el estándar HTML templates y por qué es tan importante para los web components.
Ten en cuenta que, como te explicaremos a continuación, nos sirve como modelo o patrón para el desarrollo de este tipo de elementos.
Los diferentes tipos de estándares de los web componentes
Los estándares dentro de los web components funcionan como un modelo o estándar que nos permitirá saber cómo y por qué se deben utilizar diferentes herramientas para desarrollar programas de código con los web components.
Entre los 4 tipos de estándares encontramos el HTML templates, el custom elements, el shadow DOM y los E5 modules. Cada uno de ellos cumple un objetivo diferente y, por tanto, se comporta de una forma distinta.
Si quieres conocer más a fondo estos y otros conceptos vitales dentro de los web components, te invitamos a echarle un vistazo a nuestro anterior post al respecto. Ahora, enfoquémonos en el de HTML templates.
Estándar HTML templates
Este estándar de web components es una herramienta que hace referencia a las etiquetas del lenguaje de marcado de HTML.
Estos elementos HTML solo van a ser renderizados cuando ejecutamos el programa y declaramos este tipo de elementos. Cuando empleamos los HTML templates, necesitamos una plantilla que guiará el trabajo posterior dentro del programa de código.
Es decir, esta plantilla funcionará como un esqueleto que actuará como base para la creación del web component.
¿Cómo usar HTML templates en ejercicio práctico?
Para usar el estándar HTML templates debemos tener claros los dos procesos que debemos ejecutar dentro de un mismo proyecto de código.
En primer lugar, es importante que conozcamos cómo debemos desarrollar el template o esqueleto para crear el web component. Ten en cuanta que solo podremos utilizar la etiqueta <template> </template> para realizarlo y es ahí donde tendrás que poner todo lo necesario para ejecutarlo. En este caso, vamos a añadir la fuente de una imagen y nuestro primer título en forma de h1.
Cuando tengamos el template determinado, podremos evocarlo desde el extracto de código que se sitúa dentro de las etiquetas <script> </script>.
Para llamar a este elemento, podríamos pasarlo como un método o como un parámetro dentro de un método, como verás en el siguiente ejemplo:
<body>
<template>
<h1> Hola keepcoding! </h1>
<img
src = "link o ruta de la imagen"
alt = "example-alt"
/>
</template>
</body>
<script>
class LazyImages extends HTMLElement {
constructor() {
super();
}
connectedCallBlack() {
const template = document.querySelector ('template');
</script>Si quieres ver cómo se sigue desarrollando este ejercicio práctico sobre los HTML templates, puedes echarle un ojo al artículo acerca de los pasos para crear un lazyImages con web components.
Ya que sabes en qué consiste el estándar HTML templates y cómo puedes desarrollar un web component con este ejercicio práctico, es el momento de reproducirlo por tu cuenta.
Si quieres seguir explorando estos conceptos, te invitamos a apuntarte en nuestra formación intensiva. Con el Full Stack Bootcamp podrás revolucionar tu vida laboral en pocos meses. ¡Entra ahora y solicita información!
