loading...
Cover image for Web Components using LIT-HTML and LIT-ELEMENT

Web Components using LIT-HTML and LIT-ELEMENT

jwp profile image John Peters Updated on ・1 min read

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

Discussion

pic
Editor guide
Collapse
jwp profile image
John Peters Author
  • 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);
Collapse
jwp profile image
John Peters Author

Lit-Html

Our colleague here at Dev.to Benny Powers has a lot of good things to say about it all

Is the future here now? So far it looks really good!