WebComponents

Estándar que une las tecnologías HTML, CSS y Javascript con la finalidad de crear componentes atómicos, abiertos y fáciles de reutilizar en diferentes proyectos.

← VolverPDF descargableAcceder a Discord Más sobre ManzDev

Selecciona tu nivel de conocimientos para ocultar o desbloquear temas:

Bases de los componentes

¿Qué son los WebComponents? Diferencias entre WebComponents y frameworks Javascript
Características de webcomponents ¿Cómo funcionan los WebComponents?
Custom Elements (HTML) Crear etiquetas HTML personalizadas
Custom Elements (Mejora progresiva) Mejora progresiva de etiquetas HTML personalizadas
Estructura de archivos Estructura de carpetas y archivos de un proyecto
Cambiar a un nivel superior para ver más artículos...

DOM en Webcomponents

HTML en Webcomponents Cómo escribir código HTML en un WebComponent nativo
Plantillas en WebComponents Cómo escribir código HTML a través de plantillas
Atributos en WebComponents Paso de información a WebComponents
Reactividad en atributos HTML Detección de cambios en atributos HTML
CSS en Custom Elements Estilos en un WebComponent sin Shadow DOM
Cambiar a un nivel superior para ver más artículos...

Funcionalidad de un componente

Clase de un WebComponent Partes de una clase Javascript de un WebComponent
Ciclo de vida de WebComponents Fases por las que pasa un WebComponent
Eventos en WebComponents Como manejar eventos en WebComponents
Registro de Custom Elements El almacén global de Custom Elements del navegador
Cambiar a un nivel superior para ver más artículos...

Shadow DOM (Encapsulación)

¿Qué es el Shadow DOM? Encapsulación nativa de CSS y Javascript
¿Qué es el Light DOM? La zona oculta por el Shadow DOM
Slots en WebComponents Contenido HTML desde el Light DOM al Shadow DOM
Shadow DOM declarativo Encapsulación creada desde el código HTML
202x
CSS en WebComponents Estilos en un WebComponent con Shadow DOM
CSS Scoping en Shadow DOM Dar estilo al componente desde fuera del mismo
2019
Variables CSS y CSS Parts Formas no intrusivas de cambiar estilos
2020
Cambiar a un nivel superior para ver más artículos...

Comunicación entre componentes

Custom Events en componentes Comunicar componentes con eventos personalizados
Cambiar a un nivel superior para ver más artículos...

Lit & LitElement

Plantillas lit-html
Componentes con LitElement
Propiedades y atributos
CSS en LitElement
Cambiar a un nivel superior para ver más artículos...

Atomico

Introducción: ¿Qué es Atomico?
Props y hooks en Atomico
Cambiar a un nivel superior para ver más artículos...

Aprender más

Si lo prefieres, puedes aprender también sobre estas temáticas:

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev