What is the difference between lit-element & lit-html?

Question

I have been learning Polymer and this came in - The future of web (lit-element & lit-html)

I understood that lit-html is for HTML templating with a couple of efficient techniques. At the same time lit-element is a lightweight web component base class which has the lit-html inside it.

Question: If lit-element comes with lit-html, I would solely use the lit-element for all my purposes. What exactly does lit-html doing explicitly with its own separate context.

One should choose lit-element or lit-html while developing a standalone web application?

Any help on guiding through this would be of much help!

Answer 1

First, lets clarify the following points:

• Web Components technologies are supported in modern browsers by default. You can build a Web Component application using the browser's API.

• HTML templates has been around since 2013 at least.

lit-element library is a "lightweight" version of Web Components. You'd use it if you want to build an application in Web Component and if you do so, you'd be using its built-in lit-html via html to create HTML templates

On the other hand, Just like you stated, lit-html is a library which has efficient mechanism to create and update HTML templates. You can use it for whenever you'd need an HTML template irrespective of the framework/library you are using for your website, if any.

For an example, you could build a website with jQuery or vanilla Web Components and use lit-html to create the HTML templates.

Answer 2

lit-html is a library which deals with dom rendering like other libraries e.g. React It uses the newest way of diffing the dom tree with help of native tagged templates.

var h1 = html`<h1>Header 1 <h1>`

like any other framework/library e.g. JSX it also provides you construct inside the tagged template and directives to help.

LitElement is a lightweight framework using lit-html as rendering engine. It provides you the observed properties, attributes and web components lifecycle callbacks

For a web application you should go with LitElement, if you do not want to reinvent the data binding, caching, callbacks etc. you would definitely require more like state tracking, routing etc. which you can employ from other libraries or develop your own.