Construye componentes nativos reutilizables sin framework, con encapsulación real y API clara.
Web Components te permiten crear etiquetas propias que viven bien en cualquier stack.
Custom Elements definen comportamiento; template y slot definen estructura reusable.
Shadow DOM encapsula estilos y evita colisiones con el CSS global.
Con una API bien diseñada, tus componentes son más mantenibles que una mezcla de HTML suelto.
Cuando entiendes estas piezas, el resto fluye. 🧱
Diseña primero la API del HTML, luego el JS.
Un buen componente expone una interfaz simple: atributos de entrada, slots para contenido y eventos si hace falta interacción.
Evita lógica excesiva dentro del componente. Si hace de todo, termina siendo un mini-framework difícil de mantener.
Úsalo cuando necesites encapsulación real, no por moda.
Si tu componente se usará en distintos contextos con CSS impredecible, Shadow DOM evita conflictos de estilos.
Si necesitas heredar estilos globales de forma abierta, quizá no conviene encapsular tanto. Evalúa caso por caso.
Construye componentes nativos reutilizables sin framework, con encapsulación real y API clara.
Código del tema: customElements.define | <template> | <slot> | attachShadow
Cuando entiendes estas piezas, el resto fluye. 🧱
Registra tu etiqueta con `customElements.define`.
Define markup reusable sin render inmediato.
Permite insertar contenido externo en huecos concretos.
Aísla estilos y estructura del documento principal.
Diseña primero la API del HTML, luego el JS.
Un buen componente expone una interfaz simple: atributos de entrada, slots para contenido y eventos si hace falta interacción.
Evita lógica excesiva dentro del componente. Si hace de todo, termina siendo un mini-framework difícil de mantener.
class CourseCard extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<article class="course-card">
<h3>${this.getAttribute('title') || 'Curso sin título'}</h3>
<p><slot></slot></p>
</article>
`;
}
}
customElements.define('course-card', CourseCard);Úsalo cuando necesites encapsulación real, no por moda.
Si tu componente se usará en distintos contextos con CSS impredecible, Shadow DOM evita conflictos de estilos.
Si necesitas heredar estilos globales de forma abierta, quizá no conviene encapsular tanto. Evalúa caso por caso.
class BadgeInfo extends HTMLElement {
connectedCallback() {
const root = this.attachShadow({ mode: 'open' });
root.innerHTML = `
<style>
.badge { background: #0f172a; color: #fff; padding: 4px 10px; border-radius: 999px; }
</style>
<span class="badge"><slot>Info</slot></span>
`;
}
}
customElements.define('badge-info', BadgeInfo);