En este artículo vamos a analizar las partes de un WebComponent para comprender mejor su funcionamiento. En principio, nuestra etiqueta no es más que una etiqueta HTML propia, definida por el programador, que puede tener su propio funcionamiento personalizado.

Al cargar la página, si hemos registrado un custom element en el navegador (una clase asociada a su etiqueta personalizada), todas las etiquetas HTML que utilicen dicho nombre, pasan a ser actualizadas como 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, vamos a analizarlas y comentarlas todas.

Componente (Custom Element)

Al definirlo como Custom Element, al igual que cualquier etiqueta HTML, tenemos a nuestra disposición una serie de características que existen en cualquier tipo de etiqueta HTML como podrían ser las clases, los ids, los atributos o los estilos en línea, entre otras:

<app-element id="unique" class="primary" attribute="value"></app-element>

Sin embargo, en un componente los atributos juegan un papel importantísimo, ya que pueden existir atributos específicos con una misión concreta, habitualmente, pasar información a la lógica del componente.

Nota: A diferencia de muchos frameworks Javascript, propiedades y atributos son cosas diferentes. El estándar HTML indica que a través de atributos sólo se puede pasar información de texto . Más adelante veremos que las propiedades de Javascript si que pueden almacenar datos más complejos.

Clase del componente

Como habíamos visto hasta el momento, un componente básico (más concretamente, un custom element) mínimo tendría la siguiente estructura, donde el constructor sólo se especifica si tiene lógica en su interior:

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. Esto es posible desde Javascript , donde se introducen estos nuevos cambios: private class fields.

class AppElement extends HTMLElement {
  // Properties
  name = "Manz";
  life = 5;
  #role = "Developer";

  // Methods
  constructor() {
    super();
    this.life = 10;
    this.#role = "JS Developer";
  }
}

Las propiedades name y life son públicas, mientras que la propiedad #role es privada, debido a que tiene el carácter # antes de su nombre. Ten en cuenta que ese carácter # forma parte del nombre.

Antiguamente, 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. Es posible que aún nos encontremos código similar, que no declare las propiedades fuera del constructor.

Propiedades privadas

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 #), obtendremos un mensaje de error similar al siguiente:

Uncaught SyntaxError: Private field 'role' must be declared in an enclosing class

Recuerda que también puedes definir propiedades estáticas, getters y setters.

Nota: Las propiedades privadas siempre deben declararse en la parte superior de la clase, mientras que las propiedades públicas no es obligatorio que se declaren en dicha zona.

► 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";

  test() {
    console.log("Este método es público.");
  }

  #privateTest() {
    console.log("Este método es privado.");
  }
}

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:

<app-element onClick="this.test()"></app-element>

En este caso, this hace referencia a la instancia del elemento, 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.

Por su parte, los métodos estáticos se podrán ejecutar sin necesidad de crear elementos personalizados, sino ejecutándolos sobre la clase (siempre y cuando se tenga acceso a ella de alguna forma).

Recuerda que además, las clases WebComponents, al extender de HTMLElement, poseen una serie de métodos especiales que son llamados automáticamente cuando ocurre algo. Explico más en detalle en el artículo de ciclo de vida de un WebComponent..

► Más sobre métodos de clase