---
url: >-
  https://lit-ui-router.dev/reference/lit-ui-router-ssr/index/variables/shadowElementRenderers.md
---
[lit-ui-router-ssr](../../index.md) / [lit-ui-router-ssr](../index.md) / shadowElementRenderers

# Variable: shadowElementRenderers

```ts
const shadowElementRenderers: RenderInfo["elementRenderers"];
```

Defined in: [packages/lit-ui-router-ssr/src/render.ts:70](https://github.com/simshanith/lit-ui-router/blob/1a559af0dc04d61d71ea4536fe2398902475b4ce/packages/lit-ui-router-ssr/src/render.ts#L70)

The default element renderers plus `@lit-labs/ssr`'s `LitElementRenderer`
last: `[UiViewRenderer, LightElementRenderer, LitElementRenderer]`. Pass it
as `elementRenderers` when the page holds a `LitElement` that renders into a
shadow root, such as an `<app-root>` around `<ui-view>`, which the default
draws as its bare tag, empty. `LitElementRenderer` draws every `LitElement`
no earlier renderer answers for into a declarative shadow root, an
unbranded light-DOM element and `<ui-router>` included, which is why the
default leaves it out.

## Example

```ts
import type { TemplateResult } from 'lit';
import type { UIRouterLit } from 'lit-ui-router';
import {
  prerender,
  settle,
  shadowElementRenderers,
  type PrerenderOptions,
} from 'lit-ui-router-ssr';

declare const mounts: PrerenderOptions['mounts'];
declare const router: UIRouterLit;
declare function page(router: UIRouterLit): TemplateResult;

await prerender({
  mounts,
  router,
  outDir: 'dist',
  paths: ['/'],
  elementRenderers: shadowElementRenderers,
  renderShell: async (_verdict, { path }) => {
    await settle(router, path);
    return page(router);
  },
});
```