Web Components são um conjunto de APIs nativas do navegador para construir elementos HTML customizados reutilizáveis e encapsulados — agnósticos de framework e baseados em padrões. Três tecnologias se combinam:
Web Components são um conjunto de APIs nativas do navegador para construir elementos HTML customizados reutilizáveis e encapsulados — agnósticos de framework e baseados em padrões. Três tecnologias se combinam:
<template>, <slot>) — markup inerte e reutilizável.class UserCard extends HTMLElement {
connectedCallback() { // lifecycle: runs when added to the page
const shadow = this.attachShadow({ mode: "open" }); // create shadow DOM
shadow.innerHTML = `
<style> h2 { color: blue; } </style>
<h2>${this.getAttribute("name")}</h2>
<slot></slot>
`;
}
}
customElements.define("user-card", UserCard); // name MUST contain a hyphen
<user-card name="Ann">Extra content goes in the slot</user-card>
Os estilos dentro da shadow root são scoped — o CSS da página não consegue entrar, e o CSS do componente não vaza para fora. Isto resolve nativamente o problema do CSS global:
/* page CSS */ h2 { color: red; } /* does NOT affect the <h2> inside user-card */
connectedCallback() // added to DOM
disconnectedCallback() // removed from DOM (cleanup)
attributeChangedCallback(name, old, val) // an observed attribute changed
static get observedAttributes() { return ["name"]; }
Web Components permitem que você construa widgets reutilizáveis que funcionam em qualquer framework (ou nenhum) com verdadeiro encapsulamento de estilo/DOM — ideal para sistemas de design e micro-frontends compartilhados entre times usando stacks diferentes.
É assim que bibliotecas como Shoelace distribuem componentes agnósticos de framework.
Os trade-offs (API verbosa, complexidade de SSR/styling) significam que desenvolvedores de aplicações ainda frequentemente preferem React/Vue, mas a primitiva de plataforma é poderosa e baseada em padrões.