Lit UI Router

lit-ui-router-ssr / lit-ui-router-ssr / shadowElementRenderers

Variable: shadowElementRenderers ​

ts
const shadowElementRenderers: RenderInfo["elementRenderers"];

Defined in: packages/lit-ui-router-ssr/src/render.ts:70

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);
  },
});