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.
mediumAprende a utilizar el servidor local de desarrollo es-dev-server, compatible con webcomponents y ESM para utilizar técnicas modernas de desarrollo.
advancedCaracterí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.
mediumEstructura básica de un WebComponent (custom element) y las formas de cargarlos en nuestras páginas a través de HTML o Javascript.
mediumVamos a analizar las partes de un componente web nativo (WebComponent) así como su ciclo de vida o formas de gestionar sus atributos.
mediumAprende a gestionar el marcado de un WebComponent a través de tres formas diferentes: acceso directo, forma dinámica o mediante templates.
medium¿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!
mediumLos términos Light DOM y Shadow DOM hacen referencia a zonas concretas de un WebComponent (custom element). Echa un vistazo a cuales.
mediumLas 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¿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.
mediumAprende 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.
mediumLos CustomEvent de Javascript son un mecanismo para emitir eventos personalizados que podemos usar, entre otras cosas, para comunicarnos entre componentes.
mediumLibrerí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.
mediumLitElement es una librería de Google para crear componentes nativos (WebComponents) reactivos de una forma más rápida, cómoda y productiva.
mediumLas propiedades y atributos no son lo mismo en WebComponents, y no conocer esta diferencia puede llevar a confusiones. ¡Aprende más sobre ello!
mediumEn este artículo aprenderás las diferentes formas de gestionar los estilos CSS en un componente LitElement, junto a ayudantes como classMap o styleMap.
medium