Callbacks del ciclo de vida
Conéctese a los cambios de conexión, desconexión y atributos.
Callbacks del ciclo de vida es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
El ciclo de vida del elemento
Los elementos personalizados tienen un ciclo de vida definido. El navegador llama a métodos especiales de su clase en momentos clave:
connectedCallback— añadido al DOMdisconnectedCallback— eliminado del DOMattributeChangedCallback— cambia un atributo observadoadoptedCallback— trasladado a un documento nuevo
connectedCallback
connectedCallback se ejecuta cada vez que el elemento se inserta en el documento. Es el lugar ideal para renderizar contenido, obtener datos o añadir escuchadores globales.
Puede ejecutarse varias veces si el elemento se mueve de un lugar a otro.
class StatusBadge extends HTMLElement {
connectedCallback() {
this.textContent = 'Online';
console.log('badge added to page');
}
}
customElements.define('status-badge', StatusBadge);disconnectedCallback
disconnectedCallback se ejecuta cuando el elemento se elimina del DOM. Úselo para limpiar recursos: quite los escuchadores globales, cancele los temporizadores o cierre las conexiones para evitar fugas de memoria.
class ClockWidget extends HTMLElement {
connectedCallback() {
this.timer = setInterval(() => {
this.textContent = new Date().toLocaleTimeString();
}, 1000);
}
disconnectedCallback() {
clearInterval(this.timer); // cleanup
}
}
customElements.define('clock-widget', ClockWidget);Observación de atributos
Para reaccionar a los cambios de atributos, debe declarar qué atributos desea observar mediante un getter estático observedAttributes que devuelva un array de nombres.
Solo los atributos enumerados activan attributeChangedCallback.
class AvatarImage extends HTMLElement {
static get observedAttributes() {
return ['src', 'alt'];
}
}
customElements.define('avatar-image', AvatarImage);attributeChangedCallback
Cuando se añade, elimina o modifica un atributo observado, el navegador llama a attributeChangedCallback(name, oldValue, newValue). Úselo para mantener la salida renderizada sincronizada con los atributos.
class AvatarImage extends HTMLElement {
static get observedAttributes() { return ['src']; }
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'src') {
this.innerHTML = '<img src="' + newValue + '">';
}
}
}
customElements.define('avatar-image', AvatarImage);Argumentos del callback
attributeChangedCallback recibe tres argumentos:
name— qué atributo ha cambiadooldValue— valor anterior (null si se acaba de añadir)newValue— valor nuevo (null si se ha eliminado)
Compare el valor anterior y el nuevo para evitar trabajo innecesario.
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return; // no real change
console.log(name + ' changed to ' + newValue);
}Llamadas iniciales por atributos
Si un elemento ya tiene un atributo observado cuando se actualiza, attributeChangedCallback se ejecuta una vez por cada atributo antes de connectedCallback. Esto permite inicializarlo automáticamente a partir del marcado.
// <avatar-image src="a.png"></avatar-image>
// On upgrade: attributeChangedCallback('src', null, 'a.png')
// runs BEFORE connectedCallback.Reflejar propiedades en atributos
Un patrón habitual consiste en exponer una propiedad de JavaScript que lea y escriba el atributo. Así, la API resulta más cómoda y se mantiene sincronizada.
class AvatarImage extends HTMLElement {
static get observedAttributes() { return ['src']; }
get src() { return this.getAttribute('src'); }
set src(value) { this.setAttribute('src', value); }
}
customElements.define('avatar-image', AvatarImage);adoptedCallback
adoptedCallback se ejecuta cuando un elemento se traslada de un documento a otro, por ejemplo, a un iframe mediante document.adoptNode. Rara vez es necesario, pero completa el ciclo de vida.
class PortableWidget extends HTMLElement {
adoptedCallback() {
console.log('moved to a new document');
}
}
customElements.define('portable-widget', PortableWidget);Orden del ciclo de vida
Para un elemento escrito directamente en HTML, el orden habitual es:
constructorattributeChangedCallback(una vez por cada atributo observado presente)connectedCallback
Más adelante, al eliminarlo, se ejecuta disconnectedCallback.
Integrarlo todo
Un elemento completo conecta todas las piezas: observa atributos, renderiza al conectarse, se sincroniza cuando cambia un atributo y limpia recursos al desconectarse.
class GreetUser extends HTMLElement {
static get observedAttributes() { return ['name']; }
connectedCallback() { this.render(); }
attributeChangedCallback() { this.render(); }
render() {
const name = this.getAttribute('name') || 'Guest';
this.textContent = 'Hello, ' + name;
}
}
customElements.define('greet-user', GreetUser);Comprobación rápida
Compruebe sus conocimientos sobre los callbacks del ciclo de vida.
Resumen
Ha aprendido el ciclo de vida de los elementos personalizados:
connectedCallbackse ejecuta al insertar el elemento; renderice aquí.disconnectedCallbackse ejecuta al eliminarlo; limpie los recursos aquí.observedAttributesdeclara qué atributos se deben observar.attributeChangedCallback(name, old, new)reacciona a los cambios.adoptedCallbackgestiona los traslados entre documentos.
A continuación, encapsularemos los estilos y el marcado con Shadow DOM.
Preguntas frecuentes
¿La lección «Callbacks del ciclo de vida» es gratis?
Sí — el texto completo de «Callbacks del ciclo de vida» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Callbacks del ciclo de vida»?
Conéctese a los cambios de conexión, desconexión y atributos. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Callbacks del ciclo de vida»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Definición de elementos personalizados
- Callbacks del ciclo de vida
- Shadow DOM y encapsulación
- Plantillas y slots