En el apartado anterior, vimos la forma básica de crear un custom element con estilos, pero aún sin darle funcionalidad. De momento, y sin Javascript, sólo podemos crear cosas muy básicas, pero más adelante profundizaremos en cosas más avanzadas.
Lo importante, es tener claro que lo ideal sería pensar en la funcionalidad sin Javascript primero, y luego, mejorarla con Javascript. Este concepto se llama mejora progresiva y es ideal para el desarrollo web, porque cubre el funcionamiento mínimo en dispositivos limitados o antiguos, y luego, mejora si es posible en dispositivos más actuales.
Los WebComponents se programan a través de una Clase Javascript, por lo que si no conoces las clases de programación, deberías antes echar un vistazo al artículo Clases en Javascript (POO).
Mejorando nuestro Custom Element
Vamos a empezar partiendo de nuestro custom element básico que aprendimos en el apartado anterior. Una etiqueta HTML personalizada <app-element> y un par de estilos CSS para hacerlo bonito:
<app-element>ManzDev es un streamer de Twitch.</app-element>
<style>
app-element {
background: indigo;
color: white;
padding: 5px;
}
</style>Ahora, para dotar de funcionalidad a nuestro Custom element app-element, vamos a crear una clase Javascript que mejorará este custom element. Observa que el código Javascript tiene varios detalles que explicaremos a continuación:
<app-element>ManzDev es un streamer de Twitch.</app-element>
<style>
app-element {
background: indigo;
color: white;
padding: 5px;
}
</style>
<script>
class AppElement extends HTMLElement {
constructor() {
super();
console.log("Custom Element inicializado: ", this);
}
}
customElements.define("app-element", AppElement);
</script>Aquí hemos hecho varias cosas:
-
1️⃣ Hemos definido una clase llamada
AppElement. Observa que es una buena práctica utilizar PascalCase para nombrar la clase, en relación al nombre que le queremos dar al custom element. -
2️⃣ Dicha clase extiende de
HTMLElement, una clase que es la base de cualquier elemento HTML, por lo que al heredarla, nuestro custom element va a tener todas las características que tenga un elemento HTML estándar. -
3️⃣ Luego, hemos definido un
constructor(), que no es más que un método especial que se ejecuta cada vez que se crea una nueva instancia de clase, o en nuestro contexto de WebComponents, cada vez que alguien define o crea una etiqueta<app-element>.
Observa que el constructor() tiene un console.log() en su interior. Esto significa que cada vez que se cargue un custom element, se verá ese mensaje en la consola Javascript del navegador. Comprueba que es así para saber si has seguido los pasos de creación del custom element correctamente.
Ojo: Si defines un constructor en tu clase, no se te debe olvidar indicar el
super()en el mismo, ya que es obligatorio llamar al constructor del padre si estás extendiendo de HTMLElement.
Asociar etiqueta y clase
Hasta aquí, lo que hemos hecho es crear un <app-element> y una clase AppElement que se basa en un elemento HTML estándar HTMLElement. Sin embargo, no hemos comentado el detalle más importante: la asociación del elemento HTML con la clase Javascript.
Esto se hace con la última línea del ejemplo anterior:
customElements.define("app-element", AppElement);Esto indica al navegador que existe una asociación entre el nombre de la etiqueta <app-element> (primer parámetro) y la clase AppElement que implementa su funcionalidad (segundo parámetro).
Así pues, si ahora creamos un elemento <app-element> en el HTML del documento, automáticamente se creará una instancia de la clase, que es el propio elemento. Puedes observar esto en la consola del navegador, ya que al hacer referencia a this, comprobarás que no es más que una referencia al elemento HTML <app-element> en cuestión.
Ahora, si intentamos hacer nuevamente la prueba que hicimos en el artículo anterior, veremos que Javascript nos dice que <app-element> es de tipo AppElement, la clase que hemos extendido, en lugar de HTMLElement como nos decía antes:
const appElement = document.querySelector("app-element");
console.log("<app-element>: ", appElement.constructor.name);Con todo esto, y si tienes soltura con Javascript y con el manejo de métodos del DOM, podríamos comenzar a implementar funcionalidad dentro de la clase AppElement para dotar de funcionalidades a nuestro custom element, como iremos viendo a lo largo de los siguientes capítulos.
