lit-html: Templates & Efficient Updates

lit-html is a lightweight library for writing HTML templates directly in JavaScript using tagged template literals. Rather than diffing an entire virtual DOM tree, it parses each template once and patches only the specific parts tied to changed values.

Writing & Rendering a Template

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

const greet = (name) => html`<p>Hello, ${name}!</p>`

render(greet('World'), document.getElementById('app'))

// Calling render() again with new dynamic values only
// patches the changed text node -- it doesn't rebuild the DOM

Why It's Efficient

Because the html tag function's static strings array is the same reference across renders of the same template call site, lit-html caches the parsed static structure and re-evaluates only the dynamic expression positions -- no full virtual-DOM diff needed.

Property vs. Attribute Bindings

html`
  <input value=${value} />        <!-- sets the HTML attribute -->
  <my-list .items=${itemsArray} /> <!-- sets the JS property directly -->
  <button @click=${onClick}>Go</button>  <!-- binds an event listener -->
`

Automatic XSS Protection

Dynamic string values are inserted as text content by default, not parsed as HTML -- a security-conscious default that prevents untrusted interpolated strings from being executed as markup.