Conceptos básicos que debes saber antes de comenzar a trabajar con WebComponents
Los WebComponents son un conjunto de características de HTML, CSS y Javascript que hacen posible un modelo estándar de componentes web.
Aprende a utilizar el servidor local de desarrollo web-dev-server, compatible con webcomponents y ESM para utilizar técnicas modernas de desarrollo.
Características de WebComponents en profundidad
Los Custom Elements (elementos personalizados) son un estándar que permite la creación de nuestras propias etiquetas HTML, generalmente en WebComponents.
Estructura básica de un WebComponent (custom element) y las formas de cargarlos en nuestras páginas a través de HTML o Javascript.
Vamos a analizar las partes de un componente web nativo (WebComponent) así como su ciclo de vida o formas de gestionar sus atributos.
Aprende a gestionar el marcado de un WebComponent a través de tres formas diferentes: acceso directo, forma dinámica o mediante templates.
¿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!
Los términos Light DOM y Shadow DOM hacen referencia a zonas concretas de un WebComponent (custom element). Echa un vistazo a cuales.
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.
¿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.
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.
Los CustomEvent de Javascript son un mecanismo para emitir eventos personalizados que podemos usar, entre otras cosas, para comunicarnos entre componentes.
Librería de Google para crear componentes de forma eficiente y productiva
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.
LitElement es una librería de Google para crear componentes nativos (WebComponents) reactivos de una forma más rápida, cómoda y productiva.
Las propiedades y atributos no son lo mismo en WebComponents, y no conocer esta diferencia puede llevar a confusiones. ¡Aprende más sobre ello!
En este artículo aprenderás las diferentes formas de gestionar los estilos CSS en un componente LitElement, junto a ayudantes como classMap o styleMap.
Librería para crear Web Components utilizando un modelo de programación funcional (hooks)
Atomico es una librería rápida y eficiente para crear WebComponents utilizando un enfoque de programación funcional.
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.