lit-html: Directives, Lists & Relation to Lit

Conditional & List Rendering

html`
  ${isLoggedIn ? html`<p>Welcome back!</p>` : html`<p>Please log in.</p>`}

  <ul>
    ${items.map(item => html`<li>${item.name}</li>`)}
  </ul>
`

// Standard JavaScript control flow -- no special templating syntax needed

Keyed Lists With repeat()

import { repeat } from 'lit-html/directives/repeat.js'

html`
  <ul>
    ${repeat(items, item => item.id, item => html`<li>${item.name}</li>`)}
  </ul>
`

// Keys let lit-html correctly track/reuse DOM nodes when
// the list reorders, instead of unnecessarily recreating them

unsafeHTML: Opting Out of Escaping

import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'

html`<div>${unsafeHTML(trustedHtmlString)}</div>`

// The name is deliberate -- only use this with content you've
// verified is trusted or already sanitized

lit-html vs. Lit (Web Components)

lit-html is the standalone, lower-level templating engine. Lit (formerly LitElement) is a web component base class built on top of it, adding reactive property declarations, a component lifecycle, and a styling API -- a project can use lit-html directly without adopting the full Lit component model.

When to Reach for It

lit-html suits projects wanting efficient, declarative DOM templating with a small runtime footprint and no framework lock-in -- an appealing building block for standards-based web components or lightweight UI without committing to a heavier framework.