Uso del ciclo de vida AttributeChangedCallback en componentes web
Contenido del curso
Bruno Gómez García
Adrián Castillo
Omar Rivas
Martin Mendez
Santiago Ramírez
FELIX EVR
César Palma
Juan Diego Garin
Diego Andres Cardenas Caro
Luis Xavier Fernández
Andres Felipe Pinchao Ramirez
Obed Paz
jorge luis jaime sánchez
Jorge Méndez Ortega
Andrés Osorio
Jorge Méndez Ortega
BALFRE VAZQUEZ CASTREJON
Andres Felipe Pinchao Ramirez
Andres Felipe Pinchao Ramirez
Miguel Angel Velazquez Romero
Andres Felipe Pinchao Ramirez
Hector Antruejo
Jimmy Buriticá Londoño
Jonatan Lisama
Gilbert Ardila
Leonardo Valdivieso
Sebastián Buitrago
Daniel Adolfo Ordoñez Rubio
Sebastián Buitrago
Hugo Roberto Gutiérrez Valentín
Jorge Méndez Ortega
Santiago Reynoso Dunjo
Joel alexander
Jimmy Buriticá Londoño
Para evitar el error de consola:
Uncaught RangeError: Maximum call stack size exceeded. at HTMLElement.attributeChangedCallback
sería conveniente hacer lo siguiente:
attributeChangedCallback(attr, oldVal, newVal) { if (oldVal !== newVal) { this[attr] = newVal } }
Perdón por la molestia pero podrías ampliar un poco mas y explicar el error y tu solución, busque en google pero no termine de entender. Gracias.
Hola Adrián, el error proviene de observedAttributes ya que esta escuchando cualquier cambio de esos 3 atributos. Entonces genera un loop y manda el error en consola.
static get observedAttributes() { return ['title', 'parrafo', 'img']; }
Lo que propone Bruno es validar si el atributo realmente cambio y entonces agregarle el nuevo valor para no tener un loop.
Saludos!!
No usen atributos que ya son de html o le dara error Maximum call stack size exceeded.
https://developer.mozilla.org/es/docs/Web/HTML/Atributos
Si no requieren hacer algo con con el valor obtenido pueden pasarlo directamente asi
attributeChangedCallback(attr, oldVal, newVal) { if (oldVal !== newVal) { this[attr] = newVal } }
Y si quieren modificar algo de ese valor pueden seguir usandolo en el if asi
if (attr === "title" && oldVal !== newVal) { this.title = newVal; }
Gracias por compartirlo. Me pasó lo mismo
Gracias... ya tenía rato debbugeando sin exito que era lo que pasaba... y las soluciones proponen otros compañeros no me funcionaba tampoco... y era por el nombre de la propiedad title
Se entendió el concepto pero el video no lo ejemplifica. El valor del atributo no estaá cambiando los el valor dentro del componente, se hizo un trabajo de edición para ocultar este hecho, puntualmente este video me decepcionó como ejemplo
Adhiero
Algo que de pronto no queda muy claro en esta clase sobre attributeChangedCallback() es que es un metodo util para mutar o actualizarlas las propiedades del componente en tiempo de ejecucion, una aproximacion a lo que podria ser un state del componente. Encontre este recurso donde se ve un ejemplo (un contador) un poco mas claro
Buena página esa que mandas
MY NOTES FOR ATTRIBUTE CHANGED CALLBACK
class myElement extends HTMLElement{ constructor(){ super(); this.attachShadow({mode:"open"}); } //Utilizaremos un observer, esto estara observando nuestros atributos //Es como indicarle al componente cuales son los atributos tendra //Si hay algo en otro que no esta en esta lista no es de el componente static get observedAttributes(){ //Aqui le decimos al observador que atributos tendra nuestro componente //Si hay otro atributo que no este aqui este no sera de importancia return ['title','parrafo','img'] } //Ya teniendo los atributos que seran observados podremos utilizar el //attributeChangedCallback //Esta funcion recibe tres parametro // 1. valor actual // 2. valor viejo // 3. nuevo valor attributeChangedCallback(attr, oldVal, newVal){ //Aqui vamos a generar los cambios de acuerdo a lo que existe en los atributos //aqui hacemos una validacion para verificar si existe el atributo en nuestro componente if(attr === "title"){ //le asignamos a la variable title que obtenemos desde el observador de //nuestro componente un nuevo valor //Esto quiere decir que si hay un nuvelo valor se tiene que hacer el cambio de //Forma dinamica this.title = newVal; } if(attr === "parrafo"){ this.parrafo = newVal; } if(attr === "img"){ this.img = newVal; } } getTemplate(){ const template = document.createElement('template'); template.innerHTML = ` <section> <h3>${this.title}</h3> <div> <p>${this.parrafo}</p> <img src="${this.img}"> </div> </section> ${this.getStyles()} `; return template } getStyles(){ return` <style> h2{ color:red; } </style> ` } render(){ this.shadowRoot.appendChild(this.getTemplate().content.cloneNode(true)) } connectedCallback(){ this.render(); } } customElements.define('my-element', myElement);
Creo que hubo un error de edicion o algo en la clase, no se demuestra que los valores de los atributos cambien en tiempo real. .
Para lograrlo agregué la siguiente logica, por si a alguien le ayuda:
Se me ocurrió esto para cuando tengas muchos parámetros no tener que hacer muchos ifs y solo actualizar el valor del attr si ha cambiado
attributeChangedCallback(attr, oldVal, newVal) { oldVal !== newVal ? this[attr] = newVal : null; }
Para estos casos y por buena práctica es recomendable que el resultado de un if ternario siempre se asigne a una variable por ejmplo lo que tiene puede quedar asi
this[attr] = (oldVal !== newVal) ? newVald : OldValue;
Como podemos ver, al cambiar atributos no se renderizan los cambios, es por eso que he decidido hacer un pequeño cambio en el metodo render() para utilizarlo también en el attributeChangedCallback()
attributeChangedCallback(attr, oldVal, newVal){ if(oldVal !== newVal){ this[attr] = newVal; } this.render(); } render() { this.shadowRoot.innerHTML = ''; this.shadowRoot.append(this.getTemplate().content.cloneNode (true)); }
Esta solución me agrado más, pero podrías hacer esto
attributeChangedCallback(attr, oldVal, newVal){ if(oldVal !== newVal){ this[attr] = newVal; // valida que el componente este montado para que solo // renderize cuando realmente exista un cambio en las propiuedades // ya que al dejarlo asi estas renderizando el componente por cada // propiedad this.shadowRoot.children[0] = al componente que estas creando // de esta manera solo renderizara cada vez que cambies una atributo if (this.shadowRoot.children[0]) { this.render(); } } } render() { this.shadowRoot.innerHTML = ''; this.shadowRoot.append(this.getTemplate().content.cloneNode (true)); }
Cuando agregamos el metodo “observedAttributes” y retornamos title como parte del arreglo, reacciona para todos los attributos title del DOM, como se puede corregir para que solo sean los suyos? Porque retorna un error "Uncaught RangeError: Maximum call stack size exceeded"
x2
¿porque ocurre un error en el callstack por exceso de tareas, al momento de utilizar el observador y el attributeChanged?
Porque JS es mono hilo.
si pero eso en que me ayuda o aporta lo que necesito es solucionar el error y saber porque sucede especificamente
No se si os pasará a vosotros tambíen pero yo he tenido que añadir una comprobación adicional en attributeChangedCallback ya que sino me hacia un bucle infinito al intentar cambiar el attributo por javascript. De echo, cuando se renderiza el componente y se le asigna el attributo, se llama a la función attributeChangedCallback y ésta entra en un bucle infinito.
attributeChangedCallback(attr, oldVal, newVal) { if (oldVal === newVal) { return; } ...
Me gusto tu aporte, sencillo y eficiente.
Les comparto mis notas de la clase, espero les sirva y puedan entender mejor el código.
Perdón por la calidad de la imagen.
¿para que declaramos oldValue si nunca se usa?
Los cambios en el navegador se producen solo una vez en el constructor, luego no vuelve a dibujarse el nodo con los cambios
No entiendo para que esto si cuando se cambia el valor del atributo en html sin el attributeChangedCallback igual cambia
Hola, Sebastián :) Puede haber muchos escenarios donde estés cambiando el atributo de algún elemento html y quieras ejecutar una función (callback) de inmediato. Por ejemplo, al mover el cursor del mouse quieras actualizar atributos con base en las coordenadas y después ejecutar una función para evaluar la posición del elemento :thinking: En conclusión, no es necesario el callback para que funcione, pero es un muy útil tener la posibilidad cuando tu código lo necesita :D.
ah, ya entendi, jajaajja si esa era la duda y pense que era algo innecesario pero veo la intencion de que siempre se este analizando si los atributos cambian
No entiendo la diferencia entre el método usado en esta clase y el anterior. En ambos requiero guardar las modificaciones en el index.html para verlas reflejadas en la pagina.
En verdad no logro ver el cambio, le indico los 3 valores, pero solo encuentra 1 , alguien puede decirme o apoyarme
MyCode
class MyCard extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } static get observedAttributes() { return [ "title", "image", "body", ]; } attributeChangedCallback(attribute, oldValue, newValue) { if (oldValue !== newValue && this[attribute]) { console.log(`${attribute} => ${this[attribute]}`); this[attribute] = newValue; } } get getTemplate() { const $TEMPLATE = document.createElement("template"); $TEMPLATE.innerHTML = ` <section> <h3>${this.title}</h3> <img src=${this.image} /> <div> <p>${this.body}</p> </div> </section> ${this.styleComponent} `; return $TEMPLATE; } get styleComponent() { return ` <style> h2 { color: green; } </style> `; } render() { this.shadowRoot.appendChild(this.getTemplate.content.cloneNode(true)); } connectedCallback() { this.render(); } } customElements.define("my-card", MyCard);
El resultado es esto
¿Con this.setAttribute() no funcionaría igual?
no se tendria que volver a renderizar el component despues de asignar el newVal??
Tienes razón, realice cambios a los atributos y no se actualizan.
