En la anterior entrega hemos visto cómo crear nuestro primer custom element, pero es el típico ejemplo de hola mundo y con eso no vais a conseguir el efecto wow.
Para eso necesitamos mostrar animales cuchis, así que he encontrado una API en forma de URL que te devuelve pandas rojos, y vamos a usarla.
Vamos a cambiar el nombre de nuestro elemento hola mundo a red-panda.
Ahora, en nuestro archivo app.js cambiamos el nombre de la clase, eliminamos este constructor que no hace nada porque es el mismo que tiene por defecto,
y antes de ponernos manos a la obra vamos a cambiar los parámetros que usamos para definirlo.
Ahora lo que introduciremos en nuestro custom element es una imagen donde el source será la URL de esta API, y listo.
Ahora guardamos los cambios, vamos a nuestro navegador, actualizamos, y aquí tenemos a nuestro primer baby panda.
Pero todavía hay más, y es que esta URL nos permite también pasarle un query string para mostrar GIFs de estos entrañables animálicos.
Así que vamos a hacer una cosa, vamos a dejar por aquí la versión sin GIF, y vamos a usar de nuevo nuestro custom element, pero pasándole un atributo GIF.
¿Y cómo detectamos esto en nuestro custom element?
Veréis, en la clase de nuestro elemento red-panda vamos a recuperar el atributo GIF.
Para ello usamos this, que se refiere al propio elemento, y el método getAttribute, al que le pasamos el nombre del atributo.
Ahora, en esta constante tenemos su valor.
Creamos una constante QS de query string, y hacemos que si el atributo GIF es diferente a null, que sería el valor que devolvería en caso de ausencia,
añadimos la query string para que nos muestre un GIF, y en caso contrario, ponemos un string vacío.
Finalmente, vamos a pasar el string que asignamos a innerHTML a un template string,
para conseguir que al final de la URL podamos evaluar el valor de la constante QS, que es el query string que queremos añadir.
Guardamos los cambios, y por favor, redoble de tambores.
Y ya vemos que ahora nos ha mostrado un GIF, y arriba nos ha cargado una imagen de un adorable bonito panda rojo.
Ay, qué bonito es.
Y con esto, ya sabemos cómo utilizar atributos en nuestros Custom Elements.
Si te ha gustado, dale like, compártelo, y si no quieres perderte el siguiente, no dudes en suscribirte a mi canal de YouTube.
Gracias por verlo.