Desarrollo Web

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.

Impartido por:

4.6 (29 valoraciones)
3 horas y 21 minutos · Curso
Web Components con LitElement

Lo que aprenderás en este curso:

  • 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 del curso

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.

Valoraciones de estudiantes:

  • 5
  • 4
  • 3
  • 2
  • 1
4.7
29 valoraciones

Contenido del curso:

    • Presentación
      3m
    • ¿Qué son Web Components?
      6m
    • ¿Qué es LitElement?
      4m
    • Requisitos previos
      2m
    • Versiones, Starter Kit y Open WC
      7m
    • Creando el primer componente
      10m
    • Lit-HTML: Motor de templates usado por LitElement
      5m
    • Usando propiedades en el template
      3m
    • Bucles
      3m
    • Render condicional
      3m
    • Bindeo de propiedades en elementos
      6m
    • Slots
      7m
    • Composición de plantillas
      4m
    • Directivas de Lit-HTML
      4m
    • Propiedad Styles
      7m
    • Reutilizar y compartir estilos
      4m
    • Estilos y Shadow DOM
      5m
    • Usando variables CSS con Shadow DOM
      6m
    • Declaración e inicialización de propiedades
      9m
    • Tipado y conversión de tipos
      6m
    • EventListeners
      5m
    • DispatchEvent y CustomEvent
      7m
    • Ciclos de vida del estándar Web Component
      7m
    • Ciclos de vida propios de LitElement
      5m
    • Render
      3m
    • FirstUpdated
      4m
    • Publicar un componente
      5m
    • Usar componentes
      4m
    • Construcción de un componente con Rollup
      4m
    • Creación del scaffolding del componente
      5m
    • Definiendo el template
      5m
    • Aplicando estilos
      5m
    • Agregando una imagen
      5m
    • Botón de acción
      7m
    • Testear un componente
      9m
También te puede interesar

Te dejamos una selección de cursos, carreras y artículos

Fundamentos de Service Workers

Curso de Fundamentos de Service Workers

1 hora y 52 minutos · Curso

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

  • Desarrollo Web
Web Components con StencilJS

Web Components con StencilJS

48 minutos y 10 segundos · Taller

En este taller conoceremos los fundamentos básicos de los Web Components y su utilidad, así como hacer uso de la herramienta StencilJS para crear nuestro …

  • Desarrollo Web

Dudas frecuentes

1

¿Cuándo comienza la formación?

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.

2

¿Cuál es el precio?

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í.

3

¿Puedo obtener un diploma que acredite mis conocimientos?

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 lista.

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.

Artículos
Ver todos