Hasta ahora hemos visto cómo crear un custom element y poder tener atributos en él para
cambiar su comportamiento. Ahora bien, ¿qué pasa si actualizamos sus atributos de forma dinámica?
Pues vamos a verlo. Para ello vamos a crear un script en línea en esta misma página.
Recuperamos el botón usando un query selector y añadimos un listener para que cuando se haga
clic ejecute una función. Esta función lo que hará es recuperar el elemento RedPanda y añadirle
un atributo GIF, de forma que ahora la imagen que muestra debería ser un GIF. Convertiremos
la adorable imagen de nuestro RedPanda en un GIF al hacer clic en el botón? Probemos.
Refrescamos nuestra página y abrimos las herramientas de desarrollo. Vemos que ahí tenemos nuestro
elemento RedPanda que muestra la imagen. Si hacemos clic en el botón que hemos creado,
vemos que ahora RedPanda tiene el nuevo atributo GIF, pero ¿cambiará la imagen?
No, nada ha cambiado nuestra página. ¿Qué te pensabas que iba a ser tan fácil? Pues no,
tenemos que programar cómo se va a comportar nuestro custom element cuando le cambiemos
un atributo. Para ello vamos a su implementación. El primer paso es crear un getter estático
de la clase llamado observed attributes que devolverá un array con los atributos que queremos
observar. En nuestro caso solo queremos observar los cambios del atributo GIF. Ahora vamos a
conocer otro método del ciclo de vida de los custom elements. Este se llama attribute change
callback y se ejecutará cada vez que cambie uno de los atributos que hemos definido en el
observe attributes. Recibe tres parámetros, el nombre del atributo que ha cambiado, el
valor anterior y el nuevo valor. Vamos a poner un console.log para probar que esto funciona.
Guardamos los cambios, actualizamos la página y en las herramientas de desarrollo vamos a
ir a la pestaña consola. Ahora cuando pulsamos el botón vemos que hay un nuevo mensaje en
la consola, así que sí, funciona nuestro método del ciclo de vida. Ahora que sabemos que este
método se ejecutará cada vez que cambiemos el atributo GIF, vamos a hacer la magia. Vamos a extraer un
nuevo método en nuestro custom element para generar la imagen del panda rojo. En ese método haremos lo
que ya estábamos haciendo en el ciclo de vida de conexión, de forma que lo podremos reusar. Así que
generaremos esta imagen cada vez que el atributo GIF cambie y también la primera vez que el elemento
se conecta en el DOM. Finalmente guardamos los cambios y ahora cuando hacemos clic en el botón
vemos que la imagen se transforma en un GIF y que el atributo GIF se ha añadido al elemento
red panda. Eh, esto de los custom elements engancha. Pues dale like al vídeo, compártelo,
haz retweet y espera la siguiente entrega que todavía hay más.