Manual de LitElement

Comenzamos el Manual de LitElement, una clase base para crear Custom Elements (elementos bajo el estándar de Web Components), con una serie de mejoras adicionales al propio estándar.

LitElement, o lit-element si lo prefieres, está creada por el equipo de Polymer e impulsado por Google. Rrepresenta la evolución de la Librería Polymer, pero más adaptada al estándar y a las nuevas características de los navegadores y del lenguaje Javascript.

En este manual aprenderás a usar LitElement para desarrollar de una manera sencilla y ágil tus propios elementos, capaces de interoperar con cualquier tipo de proyecto. Compatibles también con cualquier framework o librería Javascript.

Usando LitElement podrás contar con una base de alto rendimiento para el desarrollo de componentes, ya que implementa un sistema de binding ultrarápido llamado LitHTML, también creado por el equipo de Polymer.

En sus pocas KB de peso (6KB minimizado y comprimido) además de su sistema de templates, da soporte a diversos tipos de propiedades, que mantiene sincronizadas con los atributos de los componentes.

Si te parece útil este manual ayúdanos compartiendo!! :)

1.- Lit-HTML

Qué es Lit-HTML y cómo usar esta librería para creación de templates HTML en Javascript, capaz de ofrecer un altísimo rendimiento.

2.- LitElement

Conoce LitElement, clase base para creación rápida de Web Components, que funcionan en cualquier tipo de medio, sitios web, aplicaciones web, construidas con cualquier framework del mundo.

3.- Primer componente con LitElement

Creamos un primer componente, custom element del estándar Web Components, basado en LitElement. Hola Mundo con LitElement.

4.- Usar componentes de LitElement en cualquier proyecto web

Cómo usar componentes de LitElement, y Web Components en general, creados por nosotros u otros desarrolladores en cualquier proyecto web, con Javascript y/o frameworks.

5.- Templates en Lit-Element

Los templates en lit-element: Cómo configurar la vista de un componente, Web Component, basado en LitElement.

6.- Condicionales y bucles en templates LitElement

Aprende a crear estructuras condicionales y bucles o repeticiones en los templates de web components creados con LitElement.

7.- Sintaxis del binding en templates LitElement

En los templates de LitElement podemos indicar muchas cosas de manera declarativa, como eventos y diversos tipos de bindings. Te hacemos un resumen con ejemplos de nuevos componentes.

8.- Patrón mediador ¿Dónde está el doble binding en LitElement?

Como en LitElement no tenemos doble binding, tenemos que jugar con 1 way binding y eventos personalizados en lo que se conoce como patrón mediador.

Compartir