connectedCallback e disconnectedCallback

Os elementos personalizados expõem quatro pontos de extensão do ciclo de vida: connectedCallback, disconnectedCallback, attributeChangedCallback e adoptedCallback. Eles correspondem aos conhecidos pontos de montagem, desmontagem e atualização de qualquer modelo de componentes.

connectedCallback é executado sempre que o elemento é inserido na árvore do DOM. Este é o local adequado para ler atributos, renderizar conteúdo, associar ouvintes de eventos e iniciar temporizadores ou assinaturas.

Se o elemento for removido e reinserido, connectedCallback será acionado novamente a cada inserção. A idempotência é importante — proteja a inicialização que deve ocorrer apenas uma vez com uma sinalização, ou faça toda a configuração sempre e deixe disconnectedCallback desfazê-la.

disconnectedCallback é executado quando o elemento é removido do DOM. É nesse ponto que o senhor deve interromper intervalos, abortar requisições, remover ouvintes no nível do documento e liberar qualquer recurso que, de outra forma, poderia vazar.

Um elemento com um intervalo ativo, um ouvinte do documento ou uma promessa não resolvida não será coletado pelo mecanismo de coleta de lixo mesmo após ser desconectado. Sempre associe cada inscrição criada em connectedCallback à limpeza correspondente em disconnectedCallback.

Mover um elemento com parentB.appendChild(element) primeiro o remove do elemento pai A e depois o insere no elemento pai B. O navegador aciona disconnectedCallback e, em seguida, connectedCallback. Planeje uma desmontagem e uma configuração transitórias durante as movimentações.

Para um elemento escrito diretamente em HTML, connectedCallback é acionado durante a análise inicial, depois do construtor. Nesse momento, os atributos já foram analisados, portanto ler this.getAttribute("name") aqui retorna o valor presente na marcação.

Para um elemento com filhos declarados em HTML, os filhos talvez ainda não estejam no DOM quando connectedCallback for acionado, pois o analisador ainda está trabalhando. Use um MutationObserver ou leia os filhos dentro de requestAnimationFrame se precisar acessar os filhos declarados.

adoptedCallback é acionado quando um elemento é movido para um novo documento, normalmente por meio de document.adoptNode. A maioria dos aplicativos nunca usa esse recurso — ele é importante principalmente para componentes movidos entre iframes.

Um padrão organizado: crie um AbortController em connectedCallback, passe { signal: this.controller.signal } para cada addEventListener e fetch e, em seguida, chame this.controller.abort() em disconnectedCallback para remover todos de uma só vez.

O construtor é executado mesmo quando o elemento é criado por meio de document.createElement e nunca é inserido. Restrinja o construtor à definição dos valores iniciais das propriedades; adie a renderização, as requisições e a associação de ouvintes para connectedCallback.

Por que as inscrições e os temporizadores devem ser configurados em connectedCallback, e não no construtor do elemento?

connectedCallback (inserção) e disconnectedCallback (remoção) delimitam o ciclo de vida ativo do elemento. Configure ouvintes, intervalos e requisições em connectedCallback; desfaça essa configuração em disconnectedCallback para evitar vazamentos. Ambos podem ser acionados várias vezes — use AbortController para fazer uma limpeza agrupada de forma organizada.