Frontend

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.8 (18 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.8
18 valoraciones

Contenido del curso:

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

Desarrolla fácilmente componentes web siguiendo el estándar Web Component gracias a la librería LitElement, sucesora de Polymer.

  • Frontend
Web Components con StencilJS

Web Components con StencilJS

48 minutos y 10 segundos · taller

Desarrolla fácilmente componentes web siguiendo el estándar Web Component gracias a la librería LitElement, sucesora de Polymer.

  • Frontend

Dudas frecuentes

1

¿Cuándo comienza el curso?

En OpenWebinars los cursos 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 cursos, talleres o laboratorios unitarios.

Tenemos diferentes tipos de suscripciones, que te dará acceso completo a todos los cursos de la plataforma y a los nuevos 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 carrera.

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.

Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información.