Resumo

  • O W3C publicou o primeiro rascunho público de Custom Elements em 14 de maio de 2013. Um rascunho de 2016 detalhou classes, registro, ativação de elementos existentes e retornos do ciclo de vida; uma nota de 2018 registrou a incorporação do assunto a DOM e HTML.
  • No padrão HTML atual, autores registram definições em CustomElementRegistry. O navegador reconhece e ativa elementos aptos, depois executa reações de conexão, saída e alteração de atributos observados.

Uma redação quer uma ficha que combine retrato, manchete e link. Pode escrever um programa para percorrer cada página atrás de fichas e prepará-las uma a uma. Também pode registrar o nome de uma tag e deixar o navegador ligar as instâncias ao código certo. O segundo caminho faz a função acompanhar a própria peça, em vez de depender de um inspetor correndo pelos corredores.

O primeiro rascunho público do W3C, de 14 de maio de 2013, propôs que autores definissem novos tipos de elemento DOM. O modelo inicial reunia nome, protótipo e chamadas de ciclo de vida. Os detalhes seriam retrabalhados; a divisão de tarefas já estava posta. O navegador administra a entrada do tipo no documento, e o autor escreve seu comportamento.

O rascunho de 9 de junho de 2016 apresenta a forma mais familiar: uma classe que estende HTMLElement, registrada com customElements.define(). O próprio texto mostra um elemento já presente no documento antes do registro. Quando a definição chega, o elemento elegível é ativado. A página consegue abrir a vaga antes de a descrição completa do posto estar disponível.

O registro verifica nomes e coordena ativação e reações. O hífen no nome de um elemento autônomo ajuda a reservar um espaço para novas tags dos autores. A classe declara quais atributos observa; attributeChangedCallback() responde quando mudam. connectedCallback() cuida da entrada no documento, e disconnectedCallback() da saída. O navegador organiza essas chamadas de acordo com as regras de reação. O código da ficha pode ficar com a ficha.

Uma tag pode surgir no HTML antes de sua definição, receber instruções mais tarde e ainda ser movida ou reconectada. Seu autor precisa preparar o código para esses turnos. O navegador oferece identidade e horário de chamada, enquanto a redação decide o que fazer com imagem e manchete. Uma carteira de trabalho não redige a matéria.

A nota do W3C de 3 de maio de 2018 informou que o material de Custom Elements estava sendo incorporado a DOM, HTML e especificações relacionadas. O histórico oficial do W3C conserva a sequência desde 2013. Hoje, o capítulo Custom Elements do HTML Living Standard da WHATWG define registros, nomes válidos, ativações e filas de reação. O capítulo inclui situações desenvolvidas depois, como adoção e formulários.

Shadow DOM organiza uma árvore interna e suas relações com o conteúdo externo. Custom Elements organiza identidade e vida da tag. Uma ficha de notícia pode aproveitar ambos: um lhe dá, se necessário, a planta da sala; o outro, o nome no crachá e o chamado para trabalhar.