¿Quieres aprender a crear la clase item list component en un proyecto de web components? ¿Sabes en qué consisten los web components? Saber esto te resultará muy útil, sobre todo si estás formándote como desarrollador web.
Con este artículo sobre la clase item list component, podrás aprender sobre nuevos métodos y funciones, así como sobre los web components, que son herramientas para crear etiquetas HTML personalizadas.
Ejercicio de la clase item list component
Vamos a generar la clase item list component, uno de los web components que se deben crear para integrar dentro del desarrollo de una aplicación web de to do o tareas por hacer. Este ejercicio práctico es la representación en forma de código de lo que te comentamos en el post acerca del planteamiento de los item list para la app to do. ¡Sigue leyendo y aprende cómo se crea esta clase!
Crear la clase item list component
Para crear el componente list-item.js, tendrás que generarlo. Después, debes importar el script dentro del HTML.
<script src=./list-item.js"></script>
A su vez, tendrás que pillar el esqueleto del web component.
const templateElement = document.createElement ('template');
templateElemen.innerHtml =
<style>
</style>
<div class = "list-item-wrapper">
<span> keepcoding component boiler plate </span>
<button> ❌ </button>
</div>El objetivo principal de este programa es pintar un texto que tenga un atributo texto. Este mismo texto debe poder borrarse.
Empezaremos, entonces, a crear la clase ListItem. Tenemos que añadirle los atributos de texto que vamos a instanciar como una propiedad de la clase. Vamos a ejecutarlo con el método de getAttribute para recoger el texto.
Aquí hay una opción diferente, pues si nadie ha definido el atributo texto, tendremos que hacer un condicional en el que, si no se ha desarrollado ningún texto, declaremos un error.
En caso contrario, vamos a inicializar el método para que aparezca el texto.
Después, vamos a capturar la etiqueta span para meter el texto que recibamos en el interior.
A continuación, vamos a añadirle el span al shadow DOM del programa. Este debe estar definido como una constante dentro del const de CallBack. En el span vamos a introducir el contenido del texto.
Para probar, tendremos que instanciar el script en el fichero del HTML. Si todo va bien, podemos seguir con el desarrollo.
Ahora, tendremos que enfocarnos en el borrado del elemento. Por tanto, podemos empezar agregando el icono o el emoji X para cancelar.
<div class = "list-item-wrapper">
<span> keepcoding component boiler plate </span>
<button> ❌ </button>
</div>Después, en el script de JS, tendrás que crear el botón. Habrá que añadirle un EventLisstener que le permita al programa darse cuenta del clic del usuario.
Una vez hecho esto, puedes utilizar el método .remove para instanciar la función en la que puedes borrar el ítem que se ha agregado en un momento.
Nos falta lanzar el evento del borrado del ítem. Por tanto, vamos a crear un elemento con el método de customEvent. Una vez configurado, disparamos el evento y tendremos que comprobar si el elemento ha podido borrarse.
A continuación, puedes encontrar la representación en forma de código de todo lo que te hemos contado:
class Listitem extends HTMLElement {
constructor() {
super();
if (this.getAttribute ('text')) {
throw nrew Error ('Sin texto');
else {
this.text = this.getAttribute (´text);
}
this.attachShadow ({ mode: "open")};
}
connectedCallback() {
const template = templateElement.conten.cloneNode (true);
this.shadowRoot.appendChild (template);
const spanElement = this.shadowRoot.querySelector ('span');
spanElement.textContent = this.text;
const buttonElemnt = this.shadowRoot.querySelector ('button');
buttonElement.addEventListener ('clic'), () => {
const event = new CustomEvent ('removeitem');
this.dispatchEvent (event)
this.remove();
});
}
}
customElements.define ("list-items", ListItem);Con este artículo has aprendido cómo puedes crear un web component como la clase item list component, lo que te permitirá reproducir este mismo proceso, o uno muy similar, dentro de otros programas de código de desarrollo web.
Si quieres seguir aprendiendo sobre estos temas y muchos más, nuestro Desarrollo Web Full Stack Bootcamp es perfecto para ti, ya que tiene todos los módulos necesarios para profundizar en los conceptos y las herramientas relacionadas con este sector, muy solicitado hoy en día. ¿Te atreves a cambiar tu futuro laboral? ¡Entra ya y pide información!
