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.

← VolverGuía rápidaMás sobre ManzDev

Bases de los componentes

¿Qué son los WebComponents? Características principales de un WebComponent
medio
Etiquetas HTML personalizadas Crear Custom Elements: Etiquetas HTML personalizadas
medio
Estructura de archivos Estructura de carpetas y archivos de un proyecto
medio
Atributos de un WebComponent Uso de atributos en un WebComponent
medio
Plantillas y HTML en componentes Cómo escribir código HTML en un WebComponent nativo
medio
CSS en Custom Elements Estilos en un WebComponent sin Shadow DOM
fácil

Funcionalidad de un componente

Clase de un WebComponent Apartados de una clase de un WebComponent
medio
Ciclo de vida de un WebComponent Fases por las que pasa un WebComponent
medio
Eventos en WebComponents Como manejar eventos en WebComponents
medio
Registro de Custom Elements El almacén global de Custom Elements del navegador
medio

Shadow DOM (Encapsulación)

¿Qué es el Shadow DOM? Encapsulación nativa de CSS y Javascript
medio
¿Qué es el Light DOM? La zona oculta por el Shadow DOM
medio
Slots en WebComponents Contenido HTML desde el Light DOM al Shadow DOM
medio
Shadow DOM declarativo Encapsulación creada desde el código HTML
medio
CSS en WebComponents Estilos en un WebComponent con Shadow DOM
medio
CSS Scoping en Shadow DOM Dar estilo al componente desde fuera del mismo
medio
Variables CSS y CSS Parts Formas no intrusivas de cambiar estilos
medio

Comunicación entre componentes

Custom Events en componentes Comunicar componentes con eventos personalizados
medio

Lit & LitElement

Plantillas lit-html
medio
Componentes con LitElement
medio
Propiedades y atributos
medio
CSS en LitElement
medio

Atomico

Introducción: ¿Qué es Atomico?
medio
Props y hooks en Atomico
medio

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