JavaScript Academy · Aula

Callbacks do ciclo de vida

Associe-se a alterações de conexão, desconexão e atributos.

Callbacks do ciclo de vida é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

O ciclo de vida do elemento

Os elementos personalizados têm um ciclo de vida definido. O navegador chama métodos especiais da sua classe em momentos importantes:

connectedCallback — adicionado ao DOM
disconnectedCallback — removido do DOM
attributeChangedCallback — um atributo observado é alterado
adoptedCallback — movido para um novo documento

connectedCallback

connectedCallback é executado toda vez que o elemento é inserido no documento. Esse é o local ideal para fazer o render do conteúdo, buscar dados ou adicionar ouvintes globais.

Ele pode ser acionado várias vezes se o elemento for movido.

class StatusBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Online';
    console.log('badge added to page');
  }
}
customElements.define('status-badge', StatusBadge);

disconnectedCallback

disconnectedCallback é executado quando o elemento é removido do DOM. Use-o para fazer a limpeza: remova ouvintes globais, cancele temporizadores ou feche conexões para evitar vazamentos de memória.

class ClockWidget extends HTMLElement {
  connectedCallback() {
    this.timer = setInterval(() => {
      this.textContent = new Date().toLocaleTimeString();
    }, 1000);
  }
  disconnectedCallback() {
    clearInterval(this.timer); // cleanup
  }
}
customElements.define('clock-widget', ClockWidget);

Observando atributos

Para reagir a alterações de atributos, você deve declarar quais atributos observar com um getter estático observedAttributes que retorna uma matriz de nomes.

Apenas os atributos listados acionam attributeChangedCallback.

class AvatarImage extends HTMLElement {
  static get observedAttributes() {
    return ['src', 'alt'];
  }
}
customElements.define('avatar-image', AvatarImage);

attributeChangedCallback

Quando um atributo observado é adicionado, removido ou alterado, o navegador chama attributeChangedCallback(name, oldValue, newValue). Use-o para manter o resultado renderizado sincronizado com os 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 do retorno de chamada

attributeChangedCallback recebe três argumentos:

name — qual atributo foi alterado
oldValue — valor anterior (null se tiver acabado de ser adicionado)
newValue — novo valor (null se tiver sido removido)

Compare os valores antigo e novo para evitar trabalho desnecessário.

attributeChangedCallback(name, oldValue, newValue) {
  if (oldValue === newValue) return; // no real change
  console.log(name + ' changed to ' + newValue);
}

Chamadas iniciais de atributos

Se um elemento já tiver um atributo observado quando for atualizado, attributeChangedCallback será acionado uma vez para cada atributo antes de connectedCallback. Isso permite inicializar o elemento automaticamente a partir da marcação.

// <avatar-image src="a.png"></avatar-image>
// On upgrade: attributeChangedCallback('src', null, 'a.png')
// runs BEFORE connectedCallback.

Refletindo propriedades em atributos

Um padrão comum é expor uma propriedade JavaScript que lê e grava o atributo. Isso mantém a API prática e 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 é executado quando um elemento é movido de um documento para outro (por exemplo, para um iframe por meio de document.adoptNode). Ele raramente é necessário, mas completa o ciclo de vida.

class PortableWidget extends HTMLElement {
  adoptedCallback() {
    console.log('moved to a new document');
  }
}
customElements.define('portable-widget', PortableWidget);

Ordem do ciclo de vida

Para um elemento escrito diretamente em HTML, a ordem típica é:

constructor
attributeChangedCallback (uma vez para cada atributo observado presente)
connectedCallback

E, posteriormente, quando o elemento for removido, disconnectedCallback.

Reunindo tudo

Um elemento completo conecta todas as partes: observa atributos, faz o render ao ser conectado, sincroniza quando um atributo é alterado e faz a limpeza ao ser desconectado.

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);

Verificação rápida

Teste seus conhecimentos sobre os retornos de chamada do ciclo de vida.

Recapitulação

Você aprendeu o ciclo de vida dos elementos personalizados:

connectedCallback é executado na inserção — faça o render aqui.
disconnectedCallback é executado na remoção — faça a limpeza aqui.
observedAttributes declara quais atributos devem ser observados.
attributeChangedCallback(name, old, new) reage às alterações.
adoptedCallback trata de movimentações entre documentos.

Em seguida, vamos encapsular estilos e marcação com o DOM de sombra.

Perguntas Frequentes

A aula “Callbacks do ciclo de vida” é grátis?

Sim — o texto completo de “Callbacks do ciclo de vida” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Callbacks do ciclo de vida”?

Associe-se a alterações de conexão, desconexão e atributos. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Callbacks do ciclo de vida”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy