Es una clase (de programación orientada a objetos) base para la creación de Custom Elements. Creado por el equipo de Polymer (Google).
Realmente no lo necesitas. Pero sí tendremos varios beneficios:
- Data-binding: Permite tener varios componentes y pasarle alguna propiedad del componente hijo al padre.
- Sistema de templates reactivos: Cuando las variables de un componente se actualizan, de forma automática se puede actualizar el componente.
- Constructable stylesheets: Puedo compartir el código scc de uno a otro componente manteniendo un buen performance y sin que este se quede colgado.
- Sincronización entre propiedades y atributos de la etiqueta del componente.
- Solo ocupa un 6,6 Kb.
Es Javascript lo puedes utilizar donde lo necesites, por su característica de Web Component, como por ejemplo: Angular, React, VUE, Polymer, Ionic, Esbelt, etc.
Lit-HTML ofrece rendimiento mayor que cualquiera de los frameworks más populares.
LitElement usa Lit-HTML como motor de plantillas.
LitElement es la evolución de Polymer. Se han centrado en lo que se puede desarrollar con JS. Puedo desarrollar componentes en LitElement y luego reutilizarlo en mis otros proyectos como un componente más.
- ShadowRoot: Es la raíz del pequeño componente que creamos en el archivo. Está encapsulado en el shadow DOM.
- Shadow DOM: En el árbol del DOM existen diferentes nodos, uno de ellos puede contener a otro árbol, a este llamamos Shadow DOM, es útil puesto que nos permite aislar los estilos de modo que no afecten a los otros elementos que están fuera del shadow DOM.