---
url: >-
  https://lit-ui-router.dev/api/lit-ui-router-ssr/index/classes/LightElementRenderer.md
---
[lit-ui-router-ssr](../../index.md) / [lit-ui-router-ssr](../index.md) / LightElementRenderer

# Class: LightElementRenderer

Defined in: [packages/lit-ui-router-ssr/src/light-element-renderer.ts:44](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router-ssr/src/light-element-renderer.ts#L44)

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](UiViewRenderer.md) 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

| Parameter | Type |
| ------ | ------ |
| `tagName` | `string` |

#### 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](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router-ssr/src/light-element-renderer.ts#L46)

Answers for a class `LightDomHydrating` branded, whatever its tag.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `ceClass` | new () => `HTMLElement` |

#### Returns

`boolean`

#### Overrides

`LitElementRenderer.matchesClass`

***

### renderShadow()

```ts
renderShadow(): ThunkedRenderResult | undefined;
```

Defined in: [packages/lit-ui-router-ssr/src/light-element-renderer.ts:51](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router-ssr/src/light-element-renderer.ts#L51)

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

#### Returns

`ThunkedRenderResult` | `undefined`

#### Overrides

`LitElementRenderer.renderShadow`