Atributos observados y attributeChangedCallback

Los elementos HTML exponen su estado mediante atributos. Para reaccionar cuando <my-card name="A"> se convierte en name="B", declare la lista de atributos observados e implemente attributeChangedCallback en la clase.

Declare los atributos que le interesan mediante un getter estático: static get observedAttributes() { return ["name", "open"]; }. Solo los atributos incluidos en esta lista activan la devolución de llamada; los demás se ignoran para mejorar el rendimiento.

attributeChangedCallback(name, oldValue, newValue) se ejecuta cada vez que cambia un atributo observado. Los tres parámetros son cadenas (o null si el atributo no está presente). Úselos para actualizar el estado interno y volver a renderizar.

La devolución de llamada se ejecuta una vez por cada atributo observado que esté presente cuando se actualiza el elemento. Esto significa que un renderizado en attributeChangedCallback gestiona tanto el renderizado inicial como los posteriores, sin necesidad de una ruta independiente en connectedCallback.

En el caso de los atributos booleanos, refleje la propiedad en el atributo y viceversa: establecer element.open = true debe establecer el atributo open, y eliminar el atributo debe borrar la propiedad. Esto coincide con el comportamiento de elementos integrados como <details>.

Si attributeChangedCallback establece atributos que observa, puede entrar en un bucle infinito. Añada siempre la protección if (oldValue === newValue) return; al principio de la devolución de llamada y evite cambiar atributos observados desde su interior.

Según la convención de HTML, los atributos booleanos se consideran "establecidos" por su presencia (disabled, open) y "no establecidos" por su ausencia. Su valor se ignora: disabled="false" sigue significando que está deshabilitado. Compruebe su presencia con hasAttribute; nunca compare la cadena.

Los atributos son cadenas. Para pasar datos estructurados, use JSON.stringify en el marcado y parse en attributeChangedCallback: <my-chart data-points='[1,2,3]'>. Para cargas grandes, prefiera pasar los datos mediante una asignación de propiedad en JS.

Podría observar los cambios de atributos con un MutationObserver, pero observedAttributes + attributeChangedCallback es más rápido (no requiere configurar un observador), es declarativo (la lista de nombres observados es visible en la clase) y es el enfoque idiomático para los componentes web.

Varios atributos que cambien rápidamente activarían varias devoluciones de llamada y varios renderizados. Agrúpelos con queueMicrotask o requestAnimationFrame para que el renderizado real se ejecute una sola vez por microtarea o fotograma, independientemente de cuántos atributos hayan cambiado.

Olvidar añadir un atributo a observedAttributes desactiva silenciosamente la devolución de llamada para ese atributo. Si el componente no reacciona a una llamada a setAttribute, lo primero que debe comprobar es la lista estática observedAttributes.

¿Qué ocurre si llama indirectamente a attributeChangedCallback al establecer un atributo observado dentro de la propia devolución de llamada?

Declare los atributos que desea controlar mediante el getter estático observedAttributes; attributeChangedCallback(name, oldValue, newValue) se ejecuta para cada cambio, incluido el análisis inicial. Refleje las propiedades en los atributos para representar estados booleanos, evite los bucles infinitos y agrupe los renderizados con requestAnimationFrame para mejorar el rendimiento.