Lit Renderer

The Lit engine renders components through Lit. LitRenderer turns an AST into a TemplateResult, and the factory produces components extending LitElement rather than HTMLElement.

It exists as an alternative target for projects already invested in Lit, and as a worked example of the engine contract built against a library the framework does not otherwise depend on.

Registration The Lit engine is not registered by default. Import it once, anywhere in your bundle, before defining a component that asks for it.

import '@semantic-ui/component/engines/lit/register.js';

defineComponent({
  tagName: 'my-card',
  template,
  renderingEngine: 'lit',
});

Producing a TemplateResult

Lit’s API expects a tagged template literal. The AST is a runtime data structure, so the renderer assembles the two halves Lit would otherwise receive from source text: an array of static strings, and an array of values to interpolate between them.

Walking the AST fills both. Static markup accumulates into the strings, and each dynamic position contributes a directive instance to the values. The finished pair goes to Lit’s html tag, which returns the TemplateResult that render() hands back to LitElement. SVG content uses Lit’s svg tag, chosen at the same point.

Reactivity

Each reactive block type has a directive: expressions, conditionals, {#each}, {#match}, {#async}, {#rerender}, and subtemplate calls. Every directive holds its own Reaction, and when a signal it read changes, the directive calls Lit’s setValue() to update that position alone.

Signal changes are fine grained under both engines, and the AST is walked once under both. What differs is the layer above.

LitElement runs its own update cycle. A change to a Lit reactive property schedules willUpdate, render, and updated, and render() returns the template’s cached result for Lit to diff. Under the native engine there is no such cycle, and a signal change reaches its binding with nothing scheduled around it.

The cost is small, since the diff compares a result Lit has already committed. It is a difference in shape rather than an equivalent path.

Server Rendering

The Lit engine registers no serverRenderer, so components using it render on the client only. Lit maintains its own SSR packages, which operate on Lit’s rendering rather than on the AST. Components that need server rendering should use the native engine.

Direct Use

LitRenderer is constructed by Template.initialize() with the arguments every engine renderer receives. Constructing one directly is only useful when embedding the rendering pipeline in something other than a component.

import { LitRenderer } from '@semantic-ui/renderer/lit';

It is absent from the package’s main entry point, so importing @semantic-ui/renderer never pulls Lit into a bundle that does not use it.