Voltar para o Blog Iniciante • 5 min

Guia Rápido: Criando Web Components com JavaScript

Aprenda como criar Web Components para reutilização de código e encapsulamento de funcionalidades no front-end.

O que são Web Components?

Web Components são um conjunto de tecnologias que permitem criar elementos HTML reutilizáveis de forma nativa, sem depender de frameworks.

Criando um Web Component

Vamos criar um componente personalizado chamado <meu-card>.

class MeuCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        .card {
          padding: 20px;
          background: #f4f4f4;
          border-radius: 8px;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }
      </style>
      <div class="card">
        <slot></slot>
      </div>`;
  }
}
customElements.define('meu-card', MeuCard);

Usando o Componente

Agora, podemos usá-lo no HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Components</title>
</head>
<body>
  <script src="meu-card.js" defer></script>
  <meu-card>Olá, este é um Web Component!</meu-card>
</body>
</html>

Próximos passos

Experimente adicionar atributos dinâmicos e eventos ao seu Web Component para torná-lo mais interativo.