Módulo 13: Web Components
2. Resumo da Aula Anterior
No último módulo, aprendeste a usar Microdados para comunicar com o Google. Agora, vamos aprender a criar as tuas próprias tags HTML personalizadas e reutilizáveis, usando uma tecnologia poderosa chamada Web Components.
3. O Que Vais Aprender Hoje
- ✅ O que são Web Components e por que usá-los.
- ✅ A tag
<template>: o esqueleto invisível. - ✅ Custom Elements: criar tags como
<meu-botao>. - ✅ O conceito de Shadow DOM (encapsulamento).
4. Teoria: Os Teus Próprios Peças
Conceito: Web Components permitem-te criar elementos HTML personalizados que funcionam de forma independente, com o seu próprio estilo e comportamento, sem afetar o resto do site.
🧱 Analogia: Peças de LEGO
Imagina que estás a construir uma cidade de LEGO:
- Tags Padrão: São as peças básicas (quadradas, retangulares) que vêm em qualquer caixa.
- Web Components: É uma peça especial que tu mesmo desenhaste (ex: um boneco completo ou uma roda complexa).
- Template: É o molde ou a planta dessa peça, guardada numa caixa preta.
- Shadow DOM: É a tinta da peça. Podes pintar a tua peça de vermelho sem que as outras peças à volta subitamente fiquem vermelhas também.
5. Exemplos Práticos
Exemplo 1: Usar o <template>
Define HTML que não aparece no ecrã até que o chames.
<template id="meu-cartao">
<style>
.card { border: 2px solid blue; padding: 10px; }
</style>
<div class="card">
<h2>Título do Cartão</h2>
<slot name="conteudo"></slot>
</div>
</template>O <slot> é um espaço vazio onde podes injetar texto mais tarde.
Exemplo 2: Criar um Custom Element
Dar vida a uma nova tag via JavaScript.
class AlertaEspecial extends HTMLElement {
constructor() {
super();
this.innerHTML = "<p>⚠️ ATENÇÃO: Isto é um aviso!</p>";
this.style.color = "red";
}
}
// O nome tem de ter sempre um hífen!
customElements.define('alerta-especial', AlertaEspecial);Depois disto, podes usar no teu HTML: <alerta-especial></alerta-especial>.
Exemplo 3: Shadow DOM (Encapsulamento)
Proteger os teus estilos.
const host = document.querySelector('#elemento');
const shadow = host.attachShadow({mode: 'open'});
shadow.innerHTML = `
<style>p { color: green; }</style>
<p>Eu sou verde e não afeto ninguém lá fora!</p>
`;Mesmo que o site tenha CSS a dizer que todos os parágrafos são vermelhos, este vai continuar verde.
6. Agora é a Tua Vez!
Vamos criar o teu primeiro componente:
- Cria uma classe que herda de
HTMLElement. - No construtor, define um texto de boas-vindas.
- Regista o elemento com o nome
<user-card>. - Usa o componente 3 vezes no teu ficheiro HTML.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 Web Components ajudam a organizar código em grandes projetos.
- 📌 Templates são moldes reutilizáveis.
- 📌 Custom Elements permitem criar tags com nomes próprios (ex:
<meu-video>). - 📌 O Shadow DOM evita conflitos de CSS entre o componente e o site.
9. Desafios Práticos
Desafio 1: O Hífen Obrigatório
Porque é que não podes registar um componente chamado apenas <botas>?
Desafio 2: Invisible Man
Colocaste um texto dentro de uma tag <template> mas ele não aparece no site. É um erro?
Desafio 3: O Slot Mágico
Para que serve a tag <slot> dentro de um componente?