OpenWebinars
JavaScript

Curso de Web Components con LitElement

A lo largo de este curso aprenderás a desarrollar fácilmente componentes web, siguiendo el estándar Web Component, gracias al uso de la librería LitElement, sucesora de Polymer.

4.6(39 valoraciones)

Icono de la tecnología

No solo ofrecemos cursos; facilitamos un camino hacia la excelencia tecnológica para empresas que aspiran a liderar el cambio.

  • Relación continua de asesoramiento con especialistas.
  • Dashboards intuitivos y un LMS que se integra sin fisuras.
  • Formación práctica con líderes del sector.
  • Itinerarios que se adaptan a tus metas empresariales.
  • Acceso 24/7 a 1.500 cursos especializados y actualizados.

Para profesionales que necesitan mejorar sus habilidades y acelerar su carrera profesional.

  • Acceso 24/7 a 1.100 cursos tecnológicos y digitales para que siempre estés al día.
  • Certificados para agregar valor a tu CV.
  • Tutores y profesores con experiencia real.
  • Rutas de aprendizaje para avanzar más rápido.
  • Test de aptitudes para medir tu progreso.
Comenzar Prueba Gratis

Disfruta de 15 días de acceso total sin coste y sin compromiso.

Curso impartido por

Avatar:Alvaro Navas Mesa

Alvaro Navas Mesa

Experto Frontend

Contenido del Curso

9 Secciones · 35 Lecciones · 3 h. y 21 min. en total

Introducción

15 min.

Empezando con LitElement

19 min.

Templates y slots

38 min.

Estilos

23 min.

Propiedades

16 min.

Eventos

12 min.

Ciclos de vida

20 min.

Construcción y publicación de componentes

14 min.

Creando un componente

39 min.

Habilidades que obtendrás

  • Especificaciones del estándar Web Component
  • Crear componentes reutilizables con LitElement
  • Comunicar diferentes componentes entre sí.
  • Construir y publicar componentes siguiendo las especificaciones de Open-WC

Requisitos mínimos

Para realizar este curso se debe tener una base en HTML, CSS y Javascript, preferiblemente de la versión ES6 en adelante, o conocer cualquier otro framework o librería que permita un desarrollo por componentes (Angular, React, Vue...). Si no fuera así recomiendo realizar el curso de ECMAScript 6 que tenemos disponible en la plataforma.

Valoración de nuestros alumnos

4.6
39 valoraciones
  • 5
  • 4
  • 3
  • 2
  • 1
Me ha encantado el curso, es una introducción muy buena a lit element, el profesor explicado todo de forma excelente y ojalá que grabe más cursos.
Ruben VILCHES PEREZ
Álvaro se explica de manera magistral. he aprendido mucho sobre lit gracias a este curso!
Francisco Javier GALLARDO DE LA CRUZ

Completa tu formación con estos contenidos

Icono de la tecnología
Curso

Fundamentos de Service Workers

Intermedio
1 h. y 52 min.

Aprende con el curso de fundamentos de Service Workers qué son y cómo programarlos para utilizarlos en nuestras...

Carlos Herrera Conejero
4.2
Icono de la tecnología
Taller

Web Components con StencilJS

Intermedio
48 min.

En este taller conoceremos los fundamentos básicos de los Web Components y su utilidad, así como hacer uso...

Pablo Ortuño Salmerón
4.5

FORMACIÓN EMPRESARIAL

Descubre cómo OpenWebinars puede ser el socio estratégico en el desarrollo profesional de tu equipo

Más de 310.000 profesionales de distintas industrias han encontrado en nuestra metodología y contenidos la clave para su transformación digital. Únete a líderes del sector que ya han elevado la formación de sus equipos con nosotros.

CetelemLogo
TelefonicaLogo
VassLogo
AccentureLogo
IbermaticaLogo
MapfreLogo
OpenWebinars

/ business

La formación que tu equipo merece, los resultados que tu empresa necesita

Asesoría Personalizada

Una relación continua de asesoramiento con especialistas dedicados a maximizar el impacto formativo en tu equipo.

Herramientas Avanzadas

Dashboards intuitivos y un LMS que se integra sin fisuras con tu infraestructura actual a través de SSO.

Itinerarios Personalizados

Diseñamos un mapa de las rutas formativas de tus equipos que se alinea con los objetivos estratégicos y operativos de tu empresa.

Especialistas de la Industria

Los profesores de OpenWebinars son líderes en sus campos, brindando conocimientos prácticos que transforman la teoría en habilidades aplicables.

Formación On-Demand

Accede a un catálogo de contenidos que evoluciona al ritmo de la tecnología, disponible 24/7, para que nunca dejes de avanzar.

Desarrollo Profesional Continuo

Más de 1.500 cursos especializados y actualizados, diseñados para mantener a tu empresa a la delantera de la innovación tecnológica.

Experimenta cómo nuestra metodología ya ha potenciado a más de 310.000 profesionales en diversas industrias.
Conviértete en el experto que el mercado tecnológico busca

Amplia Biblioteca de Cursos

Más de 1.100 cursos especializados en tecnología y negocios digitales, disponibles 24/7 para que aprendas a tu ritmo y según tus intereses.

Dominio en Tecnologías Emergentes

Acceso a formaciones de IA, Cloud, Data, Ciberseguridad y Desarrollo, para mantenerte a la vanguardia en las áreas más innovadoras.

Certificaciones Profesionales

Completa tu formación y obtén certificados que agreguen valor a tu CV, destacando en un mercado laboral competitivo.

Especialistas de la Industria

Aprende de aquellos que no solo enseñan, sino que innovan, profesores que traen experiencias del mundo real a tu pantalla.

Rutas de Aprendizaje

Ya sea que estés empezando o buscando acelerar tu progreso, encuentra cursos alineados con tus aspiraciones y desafíos profesionales.

Evaluaciones Prácticas

Test de aptitudes y evaluaciones para seguir tu avance y enfocar tu desarrollo donde más lo necesitas.

Experimenta cómo nuestra metodología ya ha potenciado a más de 310.000 profesionales en diversas industrias. Comenzar Prueba Gratis
Elige el Plan de OpenWebinars que impulse tu transformación
La metodología, contenidos y plataforma de formación que se adapta al tamaño y ritmo de tu empresa, sea una gran Corporación, una Startup o una Empresa en crecimiento
OpenWebinars Business Soluciones escalables y personalizadas para tu empresa
Acceso 24/7 a 1.500 cursos especializados y actualizados
Automatizaciones y planificador de licencias
Itinerarios personalizados que se adaptan a tus metas empresariales
Creación de informes avanzados y personalizados
Dashboards intuitivos para gestionar la formación y analizar progresos
Customer Success dedicados a maximizar el impacto en tu equipo
Gestor de contenido propio (LMS): Total control en el contenido formativo
Personalización de la experiencia: Integración visual que refleja tu marca
Implementación de SSO: Integración perfecta con tus sistemas internos
Acceso a API: Conecta OpenWebinars con tus propias apps y flujos de trabajo
Básico Mensual

39,90€/mes

Ideal para profesionales con necesidades específicas a corto plazo o que prefieren una flexibilidad total.

Acceso 24/7 a 1.100 cursos especializados y actualizados
Formaciones de IA, Cloud, Ciberseguridad, Data y Desarrollo
Certificados para agregar valor a tu CV
Tutores y profesores con experiencia real
75 Rutas de aprendizaje para avanzar más rápido
Test de aptitudes para medir tu progreso
Suscríbete ahora
Experto Anual

225€/año

18,75€/mes (Ahorras 6 meses)

Para profesionales que buscan ahorrar en su formación continua y quieren convertirse en expertos demandados.

Acceso 24/7 a 1.100 cursos especializados y actualizados
Formaciones de IA, Cloud, Ciberseguridad, Data y Desarrollo
Certificados para agregar valor a tu CV
Tutores y profesores con experiencia real
75 Rutas de aprendizaje para avanzar más rápido
Test de aptitudes para medir tu progreso
Comenzar Prueba Gratis Disfruta de 15 días de acceso total sin coste y sin compromiso.

Preguntas frecuentes

Resuelve tus dudas o contacta con nosotros para más información.

Efectivamente, una vez superada cada formación, podrás descargarte el diploma acreditativo de cada una de ellas. Añádelas a tu CV y mejora tu perfil para las empresas.

También podrás obtener un diploma de nivel superior al superar todas las formaciones de la ruta.

En OpenWebinars no vendemos formaciones.

Tenemos diferentes tipos de suscripciones, que te dará acceso completo a todas las formaciones de la plataforma y a las nuevas que vamos lanzando, siempre y cuando tu suscripción esté activa (como Spotify con la música o Netflix con las películas y series).

¿Eres una empresa? Tenemos planes especiales para ti. Consúltanos aquí.

En OpenWebinars las formaciones no tienen fecha de inicio y de final.

Cada curso tiene una fecha de publicación y desde ese día estarán 100% disponible todos los contenidos del curso para los usuarios suscritos a alguno de nuestros planes.

becasBannerImg
+90.000 ESTUDIANTES CADA AÑO

Becas OpenWebinars

Para Centros de FP y Universidades de España

Colaboramos con más de 750 centros de Formación Profesional en España para dotar a los estudiantes IT de los recursos necesarios para afrontar el mercado laboral con las máximas garantías.

logoBecas

Los alumnos objetivo de este curso son aquellos desarrolladores web que estén interesados en conocer el estándar Web Component y aprender a crear componentes fácilmente utilizando la librería LitElement.

Para realizar este curso es imprescindible tener una buena base en HTML, CSS y JavaScript, preferiblemente de la versión ES6 en adelante, o, en su lugar, conocer cualquier otro framework o librería que permita un desarrollo por componentes (Angular, React, Vue...). Si no fuera así, es recomendable realizar el Curso de ECMAScript 6 que tenemos disponible en la plataforma.

Iniciamos este curso de LitElement realizando una introducción tanto al profesor que lo imparte como al temario que se verá a lo largo del mismo. Además, se explicará qué son los Web Components, sus características y sus pilares fundamentales (Custom Elements, Shadow Dom, HTML Templates, ES Modules), así como qué es LitElement y qué nos aporta al desarrollo con Web Components.

Finalizada la introducción pasamos al bloque dedicado a comenzar a trabajar con LitElement, en el que conocerás los requisitos necesarios para ello. Posteriormente se explicarán las diferentes versiones existentes de esta librería, además de los diferentes Starter-Kits existentes y qué es Open-WC, que utilizaremos de forma conjunta. Para acabar este bloque crearemos, de forma práctica, nuestro primer componente paso a paso.

En el segmento posterior continuamos desarrollando nuestro componente con LitElement, centrándonos en todo lo que tiene que ver con templates y slots. Sobre templates aprenderás cómo utilizar el motor de templates Lit-HTML, además de usar en el template propiedades, bucles, render condicional y cómo bindear propiedades en elementos. En cuanto a slots, además de aprender qué son y qué funcionalidades aportan en el desarrollo de componentes. Y para acabar esta parte, aprenderás cómo trabajar con composición de plantillas y las directivas que nos ofrece Lit-HTML.

Seguimos avanzando al siguiente apartado dedicado a los estilos, en el que se explicará todo lo referente a la propiedad Styles, además de cómo reutilizar y compartir estilos entre diferentes componentes. También se explicarán las particularidades de los estilos y Shadow DOM, así como del uso de variables CSS con Shadow DOM.

En los posteriores apartados del curso veremos cómo trabajar con propiedades y eventos. Sobre las primeras aprenderás a declarar e inicializar las propiedades en LitElement, además de su tipado y conversión de tipos. Dentro de los eventos te mostraremos cómo utilizar los mismos dentro de LitElement, a través del uso de EventListeners, DispatchEvent y CustomEvent.

A continuación, pasamos a desarrollar la teoría sobre los ciclos de vida, explicando los ciclos de vida que ofrece el estándar Web Components, así como los ciclos de vida que nos ofrece LitElement. Dentro de este apartado también profundizaremos un poco más en el ciclo render y el ciclo FirstUpdated.

La penúltima sección del curso servirá para aprender sobre la construcción y publicación de componentes. En las clases en las que se divide la misma, se explicará cómo publicar un componente, cómo usar otros componentes propios o de terceros, además de cómo construir un componente con la aplicación Rollup.

El cierre del curso de LitElement llega con el apartado enfocado en la creación de un componente, pero de forma práctica, en la que se hará un completo repaso de todo lo anterior, pero aplicando toda la teoría, lo que te permitirá ver de forma más visual todo lo explicado por el profesor en las diferentes secciones del curso.

Al finalizar este completo curso, que te permitirá aprender de una forma teórica en combinación con la práctica, habrás aprendido las especificaciones del estándar Web Component, a crear componentes reutilizables con LitElement, a comunicar diferentes componentes entre sí y también a construir y publicar componentes siguiendo las especificaciones de Open-WC.