Introducción 15m
-
Presentación
3m -
¿Qué son Web Components?
6m -
¿Qué es LitElement?
4m
Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar
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.
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.
Te dejamos una selección de cursos, carreras y artículos
curso
Con este curso aprenderás:
taller
Con este taller aprenderás:
taller
Con este taller aprenderás:
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.
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í.
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.
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.
Nuestros docentes son profesionales que trabajan día a día en la materia que imparten