WebComponents - Lenguaje JS

Introducción a WebComponents

Conceptos básicos que debes saber antes de comenzar a trabajar con WebComponents

¿Qué son los WebComponents?

Los WebComponents son un conjunto de características de HTML, CSS y Javascript que hacen posible un modelo estándar de componentes web.

medium

Servidor web local de desarrollo

Aprende a utilizar el servidor local de desarrollo web-dev-server, compatible con webcomponents y ESM para utilizar técnicas modernas de desarrollo.

advanced

WebComponents nativos

Características de WebComponents en profundidad

Bases de Custom Elements

Los Custom Elements (elementos personalizados) son un estándar que permite la creación de nuestras propias etiquetas HTML, generalmente en WebComponents.

medium

Estructura y carga de componentes

Estructura básica de un WebComponent (custom element) y las formas de cargarlos en nuestras páginas a través de HTML o Javascript.

medium

Partes de un WebComponent

Vamos a analizar las partes de un componente web nativo (WebComponent) así como su ciclo de vida o formas de gestionar sus atributos.

medium

Plantillas y DOM en componentes

Aprende a gestionar el marcado de un WebComponent a través de tres formas diferentes: acceso directo, forma dinámica o mediante templates.

medium

¿Qué es el Shadow DOM?

¿Quieres entender el concepto de Shadow DOM de una forma sencilla y práctica? Su objetivo principal es encapsular CSS o Javascript. ¡Entra y te lo explico!

medium

Light DOM y Shadow DOM

Los términos Light DOM y Shadow DOM hacen referencia a zonas concretas de un WebComponent (custom element). Echa un vistazo a cuales.

medium

Slots en WebComponents

Las etiquetas slot son un mecanismo muy sencillo de enviar contenido desde el Light DOM de un componente a su Shadow DOM. Aquí verás algunos ejemplos.

medium

CSS en WebComponents

¿Qué formas existen de aplicar CSS a un WebComponent? En este artículo encontrarás todo lo que hay que saber sobre CSS en componentes nativos.

medium

Eventos en WebComponents

Aprende a gestionar los eventos de Javascript en un WebComponent de múltiples formas, a la vez que aplicas buenas prácticas al trabajar con el DOM.

medium

Custom Events en WebComponents

Los CustomEvent de Javascript son un mecanismo para emitir eventos personalizados que podemos usar, entre otras cosas, para comunicarnos entre componentes.

medium

Lit & LitElement

Librería de Google para crear componentes de forma eficiente y productiva

Plantillas lit-html

Lit-HTML es una pequeña librería de Google que permite crear plantillas HTML de una forma muy práctica y cómoda, ideal para su uso con WebComponents.

medium

Componentes con LitElement

LitElement es una clase base de una librería de Google llamada Lit, destinada a crear componentes nativos (WebComponents) reactivos de una forma más rápida, cómoda y productiva.

medium

Propiedades y atributos

Las propiedades y atributos no son lo mismo en WebComponents, y no conocer esta diferencia puede llevar a confusiones. ¡Aprende más sobre ello!

medium

CSS en LitElement

En este artículo aprenderás las diferentes formas de gestionar estilos CSS en un componente Lit basado en LitElement, junto a ayudantes como classMap o styleMap.

medium

Atomico

Librería para crear Web Components utilizando un modelo de programación funcional (hooks)

Introducción: ¿Qué es Atomico?

Atomico es una librería rápida y eficiente para crear WebComponents utilizando un enfoque de programación funcional.

medium

Props y hooks en Atomico

Las props son los datos que se envían a un componente a través de los atributos HTML. En este artículo te explico como utilizarlos con Atómico.

medium