Los callbacks connectedCallback y disconnectedCallback

Los elementos personalizados exponen cuatro hooks del ciclo de vida: connectedCallback, disconnectedCallback, attributeChangedCallback y adoptedCallback. Estos reflejan los conocidos puntos de montaje, desmontaje y actualización de cualquier modelo de componentes.

connectedCallback se ejecuta cada vez que el elemento se inserta en el árbol DOM. Este es el lugar adecuado para leer atributos, representar contenido, asociar listeners de eventos e iniciar temporizadores o suscripciones.

Si el elemento se elimina y se vuelve a insertar, connectedCallback se ejecuta de nuevo en cada inserción. La idempotencia es importante: proteja con una bandera la inicialización que solo deba realizarse una vez, o haga toda la configuración cada vez y permita que disconnectedCallback deshaga la configuración.

disconnectedCallback se ejecuta cuando el elemento se elimina del DOM. Este es el momento de detener los intervalos, cancelar las solicitudes fetch, eliminar los escuchadores a nivel de documento y liberar cualquier recurso que, de otro modo, podría provocar una fuga.

Un elemento que tenga un intervalo activo, un escuchador del documento o una Promise no resuelta no se recolectará aunque se haya desconectado. Empareje siempre cada suscripción creada en connectedCallback con su limpieza correspondiente en disconnectedCallback.

Mover un elemento con parentB.appendChild(element) primero lo elimina de parentA y después lo inserta en parentB. El navegador ejecuta disconnectedCallback y luego connectedCallback. Tenga en cuenta que, durante los movimientos, puede producirse una configuración y una limpieza transitorias.

Para un elemento escrito directamente en HTML, connectedCallback se ejecuta durante el análisis inicial, después del constructor. En este momento, los atributos ya se han analizado, por lo que leer this.getAttribute("name") aquí devuelve el valor del marcado.

En un elemento con hijos declarados en HTML, es posible que los hijos aún no estén en el DOM cuando se ejecuta connectedCallback (el analizador todavía está procesando el documento). Use un MutationObserver o lea los hijos dentro de requestAnimationFrame si necesita acceder a los hijos declarados.

adoptedCallback se ejecuta cuando un elemento se mueve a un documento nuevo (normalmente mediante document.adoptNode). La mayoría de las aplicaciones nunca lo usan; resulta útil principalmente para componentes que se mueven entre iframes.

Un patrón limpio consiste en crear un AbortController en connectedCallback, pasar { signal: this.controller.signal } a cada addEventListener y fetch, y llamar a this.controller.abort() en disconnectedCallback para eliminarlos todos de una vez.

El constructor se ejecuta incluso cuando el elemento se crea mediante document.createElement y nunca se inserta. Limite el constructor a establecer los valores iniciales de las propiedades; posponga el renderizado, las solicitudes y la vinculación de escuchadores hasta connectedCallback.

¿Por qué debería configurar las suscripciones y los temporizadores en connectedCallback en lugar de hacerlo en el constructor del elemento?

connectedCallback (inserción) y disconnectedCallback (eliminación) delimitan la vida activa del elemento. Configure los escuchadores, intervalos y solicitudes en connectedCallback; elimínelos en disconnectedCallback para evitar fugas. Ambos pueden ejecutarse varias veces: use AbortController para realizar una limpieza agrupada de forma ordenada.