Elementos de la clase addElementComponent [Ejercicio práctico]

En este post te vamos a presentar los elementos de la clase addElementComponent a través de un ejercicio práctico, en el que realizamos un programa de código que busca desarrollar una aplicación web que almacenará to do o tareas por hacer.

De este modo, podrás descifrar la importancia de la clase addElementComponent y sus elementos para el desarrollo de la aplicación. Todo esto bajo los parámetros que ofrece el campo de los web components en el desarrollo web.

Clase addElementComponent

Montar la clase addElementComponent no solo requiere conocimientos sobre clases y métodos básicos, como los constructores, sino que también necesita otros conceptos, como los web components. Estos últimos son etiquetas HTML que el desarrollador personaliza para utilizar y reciclar en cualquier punto del desarrollo del mismo programa o de otros que estén relacionados.

Es por eso que, a continuación, encontrarás todos los elementos que se incluyen dentro de la declaración de la clase addElementComponent, como la plantilla de desarrollo, el método connectedCalback, initializeAddElementButton e initializeAddElementInput.

En este caso, la clase addElementComponent nos permitirá añadirle elementos al componente, es decir, añadir task a la lista de to do a partir del input con el botón de añadir.

Plantilla de desarrollo

En primer lugar, nos encontramos con la plantailla de HTML, que funciona como una constante para crear los elementos y agregar todos los estilos que podrás visualizar en el producto final. En este caso, encontramos una plantilla con una serie de estilos para el input, el botón y el wrapper más amplio, así como una clase que guarda un input que está desactivado por defecto.

  const templateElement = document.createElement ("template");

templateElement.innerHTML = '
<style>
	.add-element-component-wrapper {
		display: flex;
	}

	input {
		flex.grow: 1;
		border-color: var (--ad-element-component-input-border-color, ligthblue)
	}

	button  {
		background-color: var (--add-element-component-button-background-color, lightblue)
	}
</style>

<div class = "add-element-component-wrapper">
	<input type = "text">
	<button disable </button>

</div>
';

Clase y constructor

Para profundizar en la declaración de la clase y el constructor, como queremos crear un web component, tendremos que extender nuestra clase a partir de los HTMLElements. Después, podremos instanciar los atributos que tiene el componente, que son el value, el label del botón y el placeholder.

En el espacio del constructor, debemos inicializar el shadow DOM y todos los atributos que hemos instanciado anteriormente, además de añadir un valor por defecto.

class AddElementComponent extends HTMLElement
	value = null;
	buttonLabel = null;
	placeholder = null;


	constructor()  {
		super();

		this.attachShadow ({ mode: "open"});

		this.value = this.getAttriute ("value")
		this.buttonLabel = this.getAttribute ("button-label") || "Añadir";
		this.placeholder = thisgetAttribute ("placeholder") || "Añade algo";
	}

Método connectedCallback

Uno de los métodos más importantes dentro de un web component es el método connectedCallBack, que se utiliza para clonar el template, así como para inicializar los clones para cada uno de los elementos, como el botón y el input. A continuación, puedes encontrar el extracto de código que refleja este proceso:

connectedCallback() {
		const clone = templateElement.content.cloneNode (true);

		this.initializeAddElementButton (clone);
		this.initializeAddElementInput (clone);

		this-shadowRoot.appendChild (clone);

	}

Método initializeAddElementButton

Además del estado de connectedCallBack, tendremos que ejecutar el método de initializeAddElementButton, que sirve para activar la acción para añadir el elemento. Es decir, nos permitirá utilizar el botón y pintar el texto que viene por el atributo. Para que esto suceda, debemos añadir el evento y dispararlo con los métodos correspondientes y con el valor del input.

	initializeAddElementButton (clone)  {
		const buttonElement = clone.querySelector ("button");

		buttonElement.textConent = this.buttonLabel:

		buttonElement.addEventListener ("click", () => {
			const inputValue = this.shadowRoot.querySelector ("input").value

			const event = new CustomEvent ("add-element", {
			detail: inputValue,
			})

		this.dispatchEvent (event);
		})

Método initializeAddElementInput

Por último, tenemos que declarar un método que nos permita inicializar el dispositivo y que nos deje añadir el elemento del input. Además de traer todos estos atributos con el método de querySelector, tendremos que definirle un event listener al input. Este nos permitirá crear una lógica del botón habilitado y deshabilitado, que se activará si se pasa el valor del input.

	initializeAddElementInput (clone) {
		const inputElement = clone.querySelector ("input");
		inputElement.value = this.value;
		inputElement.placeholder = this.placeholder;

		inputElement.addEventListener ("input", () =>  {
			const value = inputElement.value;
			const buttonElement = this.shadowRoot.querySelector ("button").value

			if (value) {
				buttonElement.removeAttribute ("disabled");
			} else {
				buttonElement.setAttribute ("disabled", "");
			}
		});

	}
}

customElements.define ("add-element-component", AddElementComponent);

¿Qué sigue ahora?

Si te ha gustado este post y has podido aprender cuáles son los elementos de la clase addElementComponent, como los métodos y el constructor que los caracteriza, estamos seguros de que podrías reproducir el mismo proceso para cualquier otro web component del proyecto que quieras. Si bien esto ya es un avance muy grande, cuantos más conocimientos tengas y más los practiques, será mejor para tu futuro laboral. Por lo tanto, te invitamos a sumarte a nuestro Desarrollo Web Full Stack Bootcamp, con el que te podrás convertir en un experto en menos de un año. ¿A qué esperas? ¡Súmate ahora y transforma tu vida!