En este post, vas a explorar la función atributteChangedCallBack en HTML template y descubrirás por qué necesitas controlar este estado para las transformaciones que tengan los web components que vas desarrollando. Así pues, anímate a seguir explorando los temas relacionados con los estados de ciclo de vida y su relación con cada uno de los estándares de los web components y lee este post acerca de la función atributteChangedCallBack en HTML template.
atributteChangedCallBack en HTML template
La función atributteChangedCallBack en HTML template es uno de los estados que puedes desarrollar e integrar dentro de un programa que busca la creación de web components para personalizar tus propias etiquetas del lenguaje de marcado de HTML, con el fin de integrarlas desde cualquier proyecto.
No obstante, antes de pasar a este punto del desarrollo, debemos explorar cómo se constituye la clase y qué constructor debe acompañarla. Es por eso que, a continuación, te mostramos la definición de class LazyImages, que se extiende del HTMLElement, así como el constructor que lo acompaña. Además, podrás ver cómo hemos definido el método de connectedCallBlack para instalar la plantilla dentro de la clase.
<script>
class LazyImages extends HTMLElement {
constructor() {
super();
}
connectedCallBlack() {
const template = document.querySelector ('template');
</script>Ahora que tenemos el resto de los parámetros que necesitamos dentro de un programa, vamos a declarar el estado de attributeChangedCallback en nuestro web component. Para ello, tenemos que pasar los parámetros de nombre, el valor antiguo y el nuevo valor. Por eso tendremos que instanciar el console.log, para que este método se pueda pintar sobre la pantalla de nuestro sitio web, así como la constante de imagen, donde se va a ejecutar querySelector.
Como no existe la etiqueta de la imagen, es decir, img, tendrás que instanciarla, para luego poder construir una condicional de la fuente de dicha imagen. Esta tendrá el valor del newValue, es decir, del tercer parámetro que se le pasa a la función.
attributeChangedCallback (name, oldValue, newValue) {
console.log (attributeChangedCallBack; ${name} | ${oldValue} | ${newValue}');
const img = this.querySelector ('img');
if (img) {
img.src = newValue
}
}De este modo, has podido aprender cómo se construye la función atributteChangedCallBack en HTML template dentro de un ejercicio práctico que tiene el objetivo de crear un web component.
¿Cuál es el siguiente paso?
Ya que has leído este artículo y has aprendido acerca de la función atributteChangedCallBack en HTML template, estarás listo para reproducir este estado de los web components en cualquier otro tipo de ejercicio. ¡Recuerda que practicar te servirá para ejercitar tus habilidades y aumentar tus conocimientos! Ahora, sigue explorando la teoría y la práctica con nuestro Desarrollo Web Full Stack Bootcamp, que te permitirá crecer como desarrollador web en cuestión de meses. ¡Entra ya y anímate a potenciar tus habilidades con la ayuda de KeepCoding!
