HTML & CSS · Capítulo 10

Web Components e componentes nativos

Custom Elements, templates, slots e encapsulamento.

CONCEITO

O que precisas de perceber

Web Components permitem componentes reutilizáveis sem framework. Aprende ciclo de vida, atributos e Shadow DOM, usando-os quando o encapsulamento traz valor real.

EXEMPLO

Vê o código

class InfoCard extends HTMLElement{connectedCallback(){this.innerHTML='<article><slot></slot></article>'}}
customElements.define('info-card',InfoCard);
CADERNO DIGITAL

As minhas notas

Escreve apontamentos deste capítulo. Ficam apenas neste dispositivo.

Guardado localmente.
AGORA TU

Exercício

Cria um custom element de alerta com atributo type e slot de conteúdo.