Ir para o conteúdo

← Blog

Web Components, lição 2: Custom Element + Shadow DOM

  • web-components
  • javascript
  • vite
Capa DICA WC — Web Components, lição 2: Custom Element + Shadow DOM

Hora de criar o primeiro Custom Element: uma classe, um nome de tag e um Shadow DOM para isolar o estilo.

Anatomia mínima

Um Custom Element é uma classe que estende HTMLElement e é registrada com um nome que contenha hífen.

class HelloBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = this.getAttribute('label') || 'Olá';
  }
}

customElements.define('hello-badge', HelloBadge);
<hello-badge label="CSS4HTML"></hello-badge>

Dica WC: nomes de tag precisam de hífen (hello-badge, não hellobadge). Isso evita colisão com elementos HTML futuros.

Shadow DOM

Sem shadow, o CSS da página vaza para dentro do componente (e o do componente vaza para fora). Com shadow, cada lado fica no seu lugar:

connectedCallback() {
  const root = this.shadowRoot ?? this.attachShadow({ mode: 'open' });
  root.innerHTML = `
    <style>
      span {
        color: #F5A623;
        font-weight: 700;
      }
    </style>
    <span><slot></slot></span>
  `;
}
  • mode: 'open': element.shadowRoot fica acessível, o que ajuda em debug e testes.
  • <slot>: projeta os filhos do light DOM para dentro do shadow.

Atributos observados

Para reagir quando um atributo muda, declare quais atributos observar:

static get observedAttributes() {
  return ['label'];
}

attributeChangedCallback(name, _old, value) {
  // atualizar UI
}

Pratique no playground

Snippets relacionados:

📚 Lição completa na trilha grátis: Custom Element + Shadow DOM

← Anterior: Lição 1: Por que Web Components?

Próxima: Lição 3: Galeria de imagens com Custom Element (vanilla) →

No hub