¿Has escuchado hablar de la clase Item Component? En este post, aprenderás sobre los web components con el desarrollo de la clase Item Component a través de un ejercicio práctico de una app de to do.
Ejercicio práctico: app de to do
En este ejercicio práctico queremos desarrollar una aplicación web de to do, es decir, que liste todas las tareas que tenemos por hacer. Este desarrollo se realiza a partir de las funcionalidades que ofrecen los web components.
Elementos de la clase Item Component
La clase Item Component del ejercicio práctico para desarrollar un app de to do es una variante de la clase o componente web list-item-component, en la que nos encargamos de desarrollar el objeto que conformará cada uno de los tasks o tareas que agregamos en nuestra lista de tareas por hacer.
Esta versión tiene un par de cambios, que te permitirán conocer las diferentes formas que hay para cumplir un objetivo. También podrás ver que no hay solo un camino para cumplir con una tarea, pueden ser varios y combinar diferentes herramientas.
Template y estilos de la clase Item Component
Antes de desarrollar la clase, tenemos que desarrollar la template o plantilla que vamos a clonar en la definición del constructor y los estados del web component. Allí podemos declarar cuantos estilos queramos, como el uso de la etiqueta flex para alinear los elementos. Además, podemos crear el wrapper de nuestro web component, que será el lugar en el que aparecerán cada una de las tareas por hacer.
A su vez, tenemos que posicionar una clase para pasar el texto a partir de la etiqueta de span, así como la etiqueta del botón, para poner el emoji de la X (el botón que nos ayudará a eliminar cada una de las tareas).
const templateElement = document.createElement ("template");
templateElement.innerHTML = '
<style>
div.item-component-wrapper {
display: flex
padding: 8px;
background-color: var (--item.component.background-color);
border-color: var (--item-component-border-color);
border: solid 1px;
}
span {
flex-grow: 1;
}
</style>
<div class = "item-component-wrapper">
<span> </span>
<button> ❌ </button>
</div>
';Definir la clase Item Component
Ahora que ya tenemos la plantilla que vamos a indicar en la definición de nuestra clase lista, vamos a empezar a construir la clase de Item Component, que se extiende de un HTMLElement.
En primer lugar, vamos a iniciar la propiedad value a partir del atributo. Si no pasamos ningún tipo de atributo, será el valor por defecto null, como verás en el constructor de la clase.
Mientras tanto, en el estado del web component del connectedCallback, tendrás que instanciar el clon de la plantilla que hemos visto hace un momento y empezar a configurar el valor del span. Si hay un valor como atributo, el programa se lo pasará al span. Luego, agregaremos el evento clic al botón, que eliminará el task al presionarlo.
Aquí también debemos instanciarle el escuchador al value, para que aparezca cada vez que cambie el valor con la nueva propiedad.
class ItemComponent extends HTMLElement {
value = null;
constructor() {
super();
this.attachShadow ({ mode : "open"});
this-value = this.getAttribute ("value") || null;
}
connectedCallback() {
const template = templateElement.content.cloneNode(true);
if (this.value) {
template.querySelector ("span").textContent = this.value;
}
const deleteButtonElement = template.querySelector ("button");
deleteButtonElement.addEventListener ("click", () => {
const event = new CustomEvent ("delete-item");
this.dispathEvent (event);
this.remove();
});
this.shadowRoot.appendChild (template);
}
Al finalizar, tendrás los siguiente métodos, que te ayudarán a observar los atributos y a controlar los posible cambios que se hagan sobre los valores o atributos que pasen cada una de las variables, anteriormente establecidas. Los métodos utilizados para cada una de estas tareas son: observedAttributes y attributeChangedCallback, respectivamente. Por último, utilizaremos el método de customElement.define para definir nuestro web component.
static get observedAttributes() {
return ("value");
}
attributeChangedCallback (name, oldValue, newvalue) {
if (name === "value" && newValue 1 == null)
this-value = newValue:
}
}
customElement.define ("List-component", ItemComponent);¡Sigue estudiando con nosotros!
Los elementos de clase Item Component que has visto en este artículo también los encuentras en la definición de otras clases o web components, pues empleamos los mismos métodos, como ChangedCallback o connectedCallback, para configurarlos. Justo por eso, este post te ayudará a reproducir elementos similares.
Si quieres expandir tus horizontes, nunca es mal momento para seguir aprendiendo y, en KeepCoding, puedes hacerlo con nuestra formación intensiva en Desarrollo Web Full Stack Bootcamp. ¡Solicita más información y cambia tu vida!
