Livro de receitas da API da Web

Capítulo 12. Componentes Web

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

Introdução

Os componentes Web são uma forma de construir novos elementos HTML com o seu próprio comportamento. Este comportamento é encapsulado num elemento personalizado.

Criar um componente

Podes criar um componente Web definindo uma classe que estende HTMLElement, como mostrado no Exemplo 12-1.

Exemplo 12-1. Um componente web básico

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello from MyComponent';
  }
}

Quando adicionas o elemento personalizado ao DOM, o browser chama o método connectedCallback. Normalmente, é aqui que reside a maior parte da lógica do teu componente. Esta é uma das chamadas de retorno do ciclo de vida. Alguns outros retornos de chamada do ciclo de vida incluem:

disconnectedCallback

Chamado quando removes o elemento personalizado do DOM. Este é um bom lugar para fazeres uma limpeza, tal como removeres os ouvintes de eventos.

attributeChangedCallback

Chamado quando alteras um dos atributos observados do elemento.

Registar um elemento personalizado

Depois de criar a sua classe de elemento personalizado, tem de a registar no browser antes de a utilizar num documento HTML. Pode registar o seu elemento personalizado chamando define no objeto global customElements, como mostrado no Exemplo 12-2.

Exemplo 12-2. Registar um elemento personalizado com o browser

customElements ...