Un ejercicio práctico, como crear un lazyImages con web components, es muy útil para ejercitar tus habilidades y aumentar tus conocimientos en desarrollo web. Te invitamos a revisar estos pasos para crear un lazyImages con web components, lo que te permitirá conocer todo lo que puedes hacer gracias a estos componentes.
Crear un lazyImages con web components
Entre los estándares de los web components, vamos a encontrar al estándar de HTML templates, donde se utilizará la etiqueta template, que servirá para tener un trozo de HTML muerto que estará presente, pero el navegador no lo tendrá en cuenta a la hora de pintarlo.
Así pues, para conocer cómo funciona el uso de este estándar para la creación de un web component, te traemos este ejercicio práctico, donde haremos un web component que pinte imágenes bajo demanda.
Definir la clase lazyImages
El primer paso dentro de este ejercicio práctico de los pasos para crear un lazyImages con web components es tener propuesta la plantilla y la definición de la clase. La plantilla funciona como un esqueleto sobre el que se basará la vista de un web component.
Primero definimos la clases de forma normal, como la haríamos en cualquier otro proyecto. Esta clase deberá tener un constructor que llame al super. Además, en este momento tendrás que tener registrado el custom element con el método propuesto para ello.
A continuación, vas a encontrar un extracto de código que explica todo esto de forma sencilla:
<body>
<template>
<h1> Hola keepcoding! </h1>
<img
src = "link o ruta de la imagen"
alt = "example-alt"
/>
</template>
</body>
#generar el script
<script>
class LazyImages extends HTMLElement {
constructor() {
super();
this.image = this.getAttribute ('image') || 'link de la imagen'
}
window.custom.element.define ('lazy-image', LazyImage)
</script>
Usar el método de selector para el DOM
El siguiente paso dentro de nuestro ejercicio práctico es el de capturar el nodo de template a partir del query selector. En este caso, vamos a volver al concepto de HTML template, que posiciona un elemento que se almacena, pero que no se renderiza hasta que se solicita, es decir, en el momento de ejecutarlo. Para hacer esto posible, tendrás que ejecutar el estado de connectedCallBack. Entonces, tendrás que dirigirte a este nodo y, con el método de querySelector, acceder a él.
<script>
class LazyImages extends HTMLElement {
constructor() {
super();
}
connectedCallBlack() {
const template = document.querySelector ('template');
</script>
Crear un clon del nodo DOM
En el siguiente paso, siguiendo con el concepto del nodo DOM, vamos a pensar en cómo clonar el nodo y configurar las propiedades que necesitemos. Aquí deberás intentar dibujar una imagen con una ruta específica.
Por lo tanto, vamos a definir la const clone, donde utilizaremos el método para clonar el contenido, que revisará un bucle de forma opcional. Lo que estamos haciendo es ir a la plantilla, ya mencionada anteriormente, y crear un clon a partir de este punto inicial del HTML, que se va a pintar dentro del web component.
A su vez, vamos a intentar a dibujar esta imagen gracias al nodo de HTML, por lo que debemos apuntar a la etiqueta HTML y a su fuente con querySelector.
<body>
<lazyimage> </lazyimage>
</body>
connectedCallBlack() {
const template = document.querySelector ('template');
const clone = template.content.cloneNode (true)
clone.querySelector ('img').src = 'ruta de la imagen'
}Utilizar append al contenido de lazyImages
Después, vamos a añadir el clon a nuestro web component de lazyImages, como puedes ver a continuación:
this.appendChild (clone)Utilizar el componente
El último de los pasos para crear un lazyImages con web components hace referencia a la duda de cómo vamos a utilizar dicho componente. El método para realizarlo es el siguiente:
<lazy-image> </lazy-image> ¿El siguiente paso?
Ahora que hemos repasado estos pasos para crear un lazyImages con web components, puedes reproducirlo en tu propio proceso de código con tus objetivos y requerimientos. Para seguir formándote, te invitamos a revisar el temario que ofrece nuestra formación en Desarrollo Web Full Stack Bootcamp, donde aprenderás de forma teórica y práctica todo lo que necesitas para convertirte en un gran experto. ¡Solicita más información y no te pierdas esta oportunidad!
