Lit UI Router

lit-ui-router-ssr / lit-ui-router-ssr / LightElementRenderer

Class: LightElementRenderer ​

Defined in: packages/lit-ui-router-ssr/src/light-element-renderer.ts:44

Renders a LightDomHydrating element's render() into its light DOM, between the part markers its client-side hydrate reads, and writes no shadow root. LightDomHydrating ships from lit-ui-router-ssr/client, and its brand is what this matches.

LitElementRenderer does the rest: it builds the element, sets its attributes and properties, and runs willUpdate. List this ahead of it in elementRenderers, since the first renderer that matches a class wins.

The use site writes ${lightSlot()} inside the element: @lit-labs/ssr reaches renderLight() only through that part. The pair around the render is written plain and every marker inside it carries the served-marker prefix, as UiViewRenderer writes a view, so the walk hydrating the surroundings reads past the interior and the element's own wake reveals it. Custom elements inside the render, <ui-view> included, are drawn by their own renderers. Collecting the render to prefix it is synchronous, so a render that awaits is not served. static styles are not written: a light-DOM element takes the document's styles.

Example ​

ts
import { lightSlot } from 'lit-ui-router-ssr/client';
import { LightElementRenderer, prerender, UiViewRenderer } from 'lit-ui-router-ssr';

const card = html`<app-card .label=${label}>${lightSlot()}</app-card>`;

await prerender({
  // …
  elementRenderers: [UiViewRenderer, LightElementRenderer],
});

Extends ​

  • LitElementRenderer

Constructors ​

Constructor ​

ts
new LightElementRenderer(tagName): LightElementRenderer;

Defined in: node_modules/.pnpm/@lit-labs+ssr@4.1.0_@types+node@24.19.2/node_modules/@lit-labs/ssr/lib/lit-element-renderer.d.ts:58

Parameters ​

ParameterType
tagNamestring

Returns ​

LightElementRenderer

Inherited from ​

LitElementRenderer.constructor

Methods ​

matchesClass() ​

ts
static matchesClass(ceClass): boolean;

Defined in: packages/lit-ui-router-ssr/src/light-element-renderer.ts:46

Answers for a class LightDomHydrating branded, whatever its tag.

Parameters ​

ParameterType
ceClassnew () => HTMLElement

Returns ​

boolean

Overrides ​

LitElementRenderer.matchesClass

renderShadow() ​

ts
renderShadow(): ThunkedRenderResult | undefined;

Defined in: packages/lit-ui-router-ssr/src/light-element-renderer.ts:51

No shadow root: returning nothing is how @lit-labs/ssr skips the declarative one.

Returns ​

ThunkedRenderResult | undefined

Overrides ​

LitElementRenderer.renderShadow