Web Components using LIT-HTML and LIT-ELEMENT

#help

Have you used these two libraries? They've been around for a while now and look good to me but I haven't yet dug into them. Would you recommend them to be one of the best web component libraries going today?

Lit-Html
Lit-Elements

The smartest way to use change detection:

Unlike VDOM libraries, lit-html only ever updates the parts of templates that actually change - it doesn't re-render the entire view

Other Similar Offerings

HTMLJS
HTML5 Template Inert until Activated!

Top comments (3)

John Peters • Sep 21 '20 • Edited

Uses a combined imperative declarative style. JSX is not needed.
Has a render function just like React.
Uses tagged Template literals
Supported by all browsers natively
Ultra Fast as only the context is tracked not the element.

import {html, render} from 'lit-html';

// A lit-html template uses the `html` template tag:
let sayHello = (name) => html`<h1>Hello ${name}</h1>`;

// It's rendered with the `render()` function:
render(sayHello('World'), document.body);

// And re-renders only update the data that changed, without VDOM diffing!
render(sayHello('Everyone'), document.body);