Estos 6 pasos para crear un helloworld con web components forman un ejercicio práctico que desarrollamos en una de las ediciones del Bootcamp de Desarrollo Web. Con este conocimiento, podrás comprender la relevancia de los web components.
Pasos para crear un helloworld con web components
La mejor forma para entender en qué consiste una herramienta y cómo puede utilizarse es realizando ejercicios prácticos que nos permitan conocer sus características más importantes. Por eso, con estos 6 pasos para crear un helloworld con web components vas a profundizar en la finalidad de los web components.
Crear una clase HelloWorld
En primer lugar, como nuestro ejercicio tiene el objetivo de crear una clase con web components, vamos a empezar definiendo la clase del web component. Para ello, tendremos que utilizar la función de class y extenderla a partir de los elementos de HTML, que se define en la API del navegador, como verás en el siguiente extracto de código:
<html>
<body>
<script>
class HelloWorld extends HTMLElement {}}
</script>
</body>
</html>Definir el constructor
Una clase siempre debe llevar un constructor, por lo que definiremos un constructor para nuestra clase de HelloWorld del web component. Dentro de la clase, vamos a instanciar al constructor, donde tendremos que llamar al elemento super, es decir, al elemento padre de la clase.
<script>
class HelloWorld extends HTMLElement {}
constructor() {
super();
console.log ('constructor');
}
}
window.customElement.define ('hello-world', HelloWorld")
</script>Aquí también podemos instanciar un console.log para tener señales del constructor dentro del navegador.
Definir el connectedCallBack de ciclo de vida
Ahora es el momento de definir el connectedCallBack de ciclo de vida para poder escribir el resto del texto. Para seguir escribiendo texto, como esto es un web component, si ponemos un this vamos a apuntar a este mismo, que es el mismo concepto de la clase. Esto lo podemos hacer gracias a que estamos extendiéndolo desde otra clase (HTMLElement), que representa otra plantilla clásica de los elementos.
El extracto de código de este elemento será:
<script>
connectedCallback() {
console.log ('connectedCallback');
this.innetHtml = 'Hello!!!'
}
</script>
Registrar el elemento para utilizarlo
Aunque este paso lo puedes realizar en el momento en el que estás desarrollando el constructor de la clase, podemos registrar el elemento personalizado HTML para utilizarlo. Para ello, utilizamos window.customElement para registrar nuestro nuevo elemento personalizado. A este parámetro le pasamos dos objetos: el nombre del web component y la clase que lo representa.
Esta línea permite que el navegador sepa qué hacer cuando se presenta el web component.
<script>
window.customElement ('hello-world', HelloWorld")
</script>Usar el elemento
Ahora es el momento en el que vamos a ver si podemos utilizar el elemento; para ello, tendremos que abrirlo, como muestra el siguiente extracto, fuera de la clase que hemos instanciado, pero dentro del cuerpo de nuestro texto HTML. Aquí podemos integrarle un valor de atributo para determinar lo que vamos a ver en el siguiente paso.
<html>
<body>
<hello-world> test= "valor de ejemplo" </hello-world>
</body>
<html>
Hacer que el attributedChangeCallBack funcione
En esta función de attributedChangeCallBack del ciclo de vida vamos a añadir el nombre de atributo que está cambiando, el valor antiguo y el valor nuevo. Esta función se dispara siempre y cuando le digamos al componente que se deben generar estos cambios y escucharlos. Es por eso que debemos definirle un escuchador con static get.
static get observedAttributes() {
return {'test'}
attributeChangedCallback (new, oldValue, newValue) {
console.log (' ${name} changed from 4${oldvalue} to ${newvalue}')Con estos 6 pasos para crear un helloworld con web components te habrá quedado mucho más claro el concepto y el funcionamiento de los web components dentro de un proyecto de código. Para seguir formándote y potenciar tus conocimientos y habilidades, te invitamos a sumarte a nuestro Bootcamp Desarrollo Web. En pocos meses, lograrás aprender a nivel teórico y práctico y estarás listo para triunfar en el mercado laboral IT. ¡Entra ahora para pedir más información y cambia tu vida!
