En un artículo anterior explicamos la base de un WebComponent: los custom element. En este artículo vamos a analizar las partes en las que se divide una clase Javascript utilizada para crear un WebComponent, para así comprender mejor su funcionamiento.
¿Qué es un WebComponent?
Recordemos que nuestro componente es varias cosas a la misma vez:
- 1️⃣ Una etiqueta HTML
- 2️⃣ Un Custom Element, es decir, una etiqueta HTML personalizada
- 3️⃣ Una clase Javascript
Al cargar una página, todos los custom elements no son más que etiquetas HTML normales. Sin embargo, desde que definimos el componente mediante un customElements.define() y una clase, el navegador los actualiza a Custom Element. Es entonces donde empiezan a actuar como componentes.
Esa clase Javascript tiene una serie de elementos, propias de las clases de programación. Sin embargo, también tiene algunas particularidades propias de un WebComponent, así que vamos a analizarlas y comentarlas todas.
Clase del componente
Como habíamos visto hasta el momento, un custom element recibe su lógica desde una clase Javascript donde se define su funcionalidad. La estructura básica de una clase sería la siguiente:
class AppElement extends HTMLElement {
constructor() {
super();
}
}
customElements.define("app-element", AppElement);
Sin embargo, como toda estructura de clase de programación, podemos establecer propiedades de clase (miembros) para guardar información, así como métodos de clase (funciones de clase) para separar y dividir correctamente la lógica de nuestra clase.
Propiedades del componente
En Javascript, las propiedades o miembros de clase se añaden en las primeras líneas de una clase, siendo posible también indicar la visibilidad de dichas propiedades (públicas o privadas). Esto es posible desde Javascript
Estas propiedades no son más que variables que existen en toda la clase, por lo que podemos utilizarlas para guardar información a la que podremos acceder desde cualquier parte de la clase.
class AppElement extends HTMLElement {
name = "Manz";
role;
#life = 10;
constructor() {
super();
this.role = "Streamer";
this.#life = 10;
}
}
Tradicionalmente, la forma de definir propiedades de clases Javascript era simplemente asignándole su valor desde el constructor (sin definirlas fuera de este método), añadiendo la palabra clave this. antes del nombre de la propiedad, la cuál siempre era pública. Actualmente, ya no tenemos esas limitaciones.
Propiedades privadas
En nuestro ejemplo, las propiedades name y role son públicas, mientras que la propiedad #life es privada, ya que tiene el carácter # como prefijo de su nombre. Ten en cuenta que ese carácter # forma parte del nombre.
Ten en cuenta que si intentamos acceder desde fuera de la clase a las propiedades públicas, podremos hacerlo sin problemas, mientras que si intentamos acceder a las propiedades privadas (incluyendo el carácter #), obtendremos un mensaje de error similar al siguiente:
Uncaught SyntaxError: Private field 'life' must be declared in an enclosing class
Nota: Las propiedades privadas siempre deben declararse en la zona superior de la clase, mientras que las propiedades públicas no es necesario. Aprender más sobre propiedades de clase.
Métodos del componente
De la misma forma que la clase Javascript del custom element puede tener propiedades, también puede tener métodos. Y estos también pueden ser públicos o privados. Siguen la misma mecánica que las propiedades que vimos anteriormente:
class AppElement extends HTMLElement {
name = "Manz";
constructor() {
super();
this.innerHTML = `<div>Este es mi componente.</div>`;
}
test() {
this.innerHTML = `<div>Se ha ejecutado un método público.</div>`;
}
#privateTest() {
this.innerHTML = `<div>Se ha ejecutado un método privado.</div>`;
}
}
customElements.define("app-element", AppElement);
<app-element onClick="this.test()"></app-element>
Observa la pestaña HTML. En el caso de tener un custom element del componente anterior en el HTML, podríamos incluso ejecutar uno de sus métodos, utilizando un evento onClick.
La palabra clave this hace referencia al propio componente, por lo que podríamos aprovechar para ejecutar métodos públicos. Los métodos privados sin embargo, sólo se podrán ejecutar desde el interior de la clase.
En el artículo Métodos de clases puedes aprender más sobre la programación orientada a objetos.
Componente (Custom Element)
Recuerda que además de una Clase Javascript, un componente es también un Custom Elements, y por lo tanto, una etiqueta HTML, por lo que tenemos a nuestra disposición una serie de características que podemos utilizar en ellos:
- Podemos asignarle clases CSS desde HTML, o mediante classList con Javascript
- Podemos identificarlos mediante ids o añadir atributos HTML
- Podemos aplicar estilos en línea
<app-element id="unique" class="primary" attribute="value"></app-element>
Además, también podemos ejecutar métodos del DOM como .append(), .querySelector() u otros. De hecho, al poder definir métodos dentro de una clase, también podemos ejecutar métodos que existen dentro del componente, ya que recuerda que el elemento además de una etiqueta HTML, también es una clase Javascript:
<app-element></app-element>
<script>
const appElement = document.querySelector("app-element");
appElement.test();
</script>
Recuerda que las clases de los WebComponents, al extender de
HTMLElement, poseen una serie de métodos especiales que son llamados automáticamente cuando ocurre un evento concreto. Profundizaremos en ellos en el próximo artículo: Ciclo de vida de un WebComponent.
