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

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.

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.