Atributos de un WebComponent

Por norma general, los atributos de nuestro custom element se utilizarán para pasar información desde el exterior al propio componente. Esta información puede ser de tipo textual o simplemente no tener valor y existir sólo para indicar alguna característica booleana de verdadero o falso.

Por ejemplo, observemos el siguiente ejemplo:

<app-element value="15" is-enabled></app-element>

En este caso tenemos dos atributos:

• El atributo value contiene un valor 15, sin embargo, los atributos siempre se reciben como .
• El atributo is-enabled no especifíca valor, técnicamente es un de tamaño 0, que se considera .

Acceder a atributos del DOM

Para trabajar con los atributos de un elemento HTML estándar, tenemos los siguientes métodos (los cuales podemos utilizar también para custom elements):

	Métodos	Descripción
	.hasAttributes()	¿El elemento tiene atributos?
	.getAttributeNames()	Devuelve un de atributos (lowercase).
	.hasAttribute(name)	¿El atributo name existe?
	.getAttribute(name)	Devuelve el valor de name o si no existe.
	.removeAttribute(name)	Elimina el atributo name.
	.setAttribute(name,value)	Fija el atributo name al valor value.
	.toggleAttribute(name,force)	Si existe, lo elimina, si no existe, lo añade.

Como en nuestra clase, this es una referencia al propio custom element, podemos utilizar estos métodos de trabajo sobre etiquetas habituales en nuestros componentes, ya que estamos extendiendo de HTMLElement.

Veamos una posible implementación donde utilicemos algunos de estos métodos:

class AppElement extends HTMLElement {

  constructor() {
    super();
    console.log("Este componente tiene los atributos: ", this.getAttributeNames());
    console.log("El valor del atributo «value» es ", this.getAttribute("value"));
    console.log("¿El atributo «is-enabled» existe? ", this.hasAttribute("is-enabled"));
  }
}

Algunas consideraciones interesantes:

• El método getAttributeNames() devuelve un array con todos los atributos del elemento. Los strings están en minúsculas (lowercase).

• El método .getAttribute() devuelve cuando no existe el atributo indicado. Si existe pero no tiene valor, devuelve una cadena de texto vacía.

• El método .setAttribute() establecerá el atributo con el valor como , aunque se le pasen otros. Si el valor establecido es cadena vacía, se añade como .

• El método .toggleAttribute() añade un atributo si no existía previamente, o lo elimina si ya existía previamente. Si añadimos el segundo parámetro force , simplemente forzaremos a añadir o eliminar el atributo, sin tener en cuenta su estado previo. Este método devuelve si el atributo, tras las operaciones realizadas, existe o no.

► Más información sobre métodos de atributos (DOM)

Reactividad en atributos

Un patrón habitual interesante muy utilizado en ciertos frameworks, es el de la reactividad. Este patrón se basa en que, cuando suceda un cambio de valor, la aplicación o web sea capaz de reaccionar y actualizar todo lo que dependa de ese valor, de modo que no tengamos que hacerlo de forma manual.

Característica	Descripción
Propiedades (Observación de atributos)
static get observedAttributes()	Observa atributos para notificar cambios.
Métodos (Detección de cambios)
attributeChangedCallback(name,old,now)	Se dispara cuando cambia un atributo observado.

Aunque Javascript no dispone de un sistema de reactividad en sí mismo, si que tiene algunos mecanismos donde podemos hacer algo parecido. Se trata de una propiedad (getter) para la observación de atributos y el método especial para la detección de cambios.

Observación de atributos

Los WebComponents incorporan una interesante forma de detectar cambios en los atributos del custom element de forma automática, para que así podamos crear lógica que reaccione a dichos cambios. Por defecto, si establecemos un valor inicial al atributo de un componente y luego lo modificamos, no sabremos cuando ha cambiado el valor, ya que tendríamos que consultarlo de forma manual para obtener la información actualizada.

En WebComponents podemos utilizar el getter estático observedAttributes(), que deberá devolver un con los nombres de los atributos que queremos observar. De esta forma, los atributos que estén siendo observados, cada vez que cambien, se disparará un método especial llamado attributeChangedCallback(), donde podemos implementar nuestra lógica.

Detección de cambios

El método attributeChangedCallback() es un método especial que se dispara cuando un atributo observado ha sido modificado. El método nos pasará por parámetro el nombre del atributo en name, así como el valor que tenía antes en old y el valor que tiene actualmente en now.

Veamos una posible implementación de este funcionamiento:

class AppElement extends HTMLElement {

  static get observedAttributes() {
    return ["value", "is-enabled"];
  }

  attributeChangedCallback(name, old, now) {
    console.log(`El atributo ${name} ha sido modificado de ${old} a ${now}.`);
  }
}

De esta forma, cada vez que el valor de los atributos observados de un WebComponent cambie, se ejecutará automáticamente el método attributeChangedCallback() con los valores específicos en sus parámetros name, old y now.