Web Components son un conjunto de API nativas del navegador para crear elementos HTML personalizados reutilizables y encapsulados — agnósticos de framework y basados en estándares. Tres tecnologías se combinan:
Web Components son un conjunto de API nativas del navegador para crear elementos HTML personalizados reutilizables y encapsulados — agnósticos de framework y basados en estándares. Tres tecnologías se combinan:
<template>, <slot>) — markup inerte y reutilizable.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>
Los estilos dentro de shadow root son con scope — el CSS de la página no puede entrar, y el CSS del componente no puede escapar. Esto resuelve nativamente el problema de 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 te permiten crear widgets reutilizables que funcionan en cualquier framework (o ninguno) con verdadera encapsulación de estilos/DOM — ideal para design systems y micro-frontends compartidos entre equipos que usan diferentes stacks.
Así es como bibliotecas como Shoelace envían componentes agnósticos de framework.
Los compromisos (API detallada, complejidad SSR/styling) significan que los desarrolladores de aplicaciones a menudo aún prefieren React/Vue, pero la primitiva de la plataforma es poderosa y basada en estándares.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar