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
Por ejemplo, observemos el siguiente ejemplo:
<app-element value="15" is-enabled></app-element>
En este caso tenemos dos atributos:
value
contiene un valor 15
, sin embargo, los atributos siempre se reciben como is-enabled
no especifíca valor, técnicamente es un 0
, que se considera 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 |
|
.hasAttribute( name) |
¿El atributo name existe? |
|
.getAttribute( name) |
Devuelve el valor de name o |
|
.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
El método .getAttribute()
devuelve
El método .setAttribute()
establecerá el atributo con el valor 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
► Más información sobre métodos de atributos (DOM)
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.
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 attributeChangedCallback()
, donde podemos implementar nuestra lógica.
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
.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev