Lit UI Router

lit-ui-router-ssr / client / LightDomHydrating

Function: LightDomHydrating() ​

ts
function LightDomHydrating<T>(Base): T & LightDomHydratingConstructor;

Defined in: packages/lit-ui-router-ssr/src/light-dom.ts:77

Adds the light-DOM side of a server render to a consumer's LitElement.

The element renders into its own light DOM, and static styles do not apply to it: there is no shadow root to adopt them, so it takes the document's styles. It sleeps while defer-hydration is on it and holds the nodes the server drew. The use site's lightSlot() part removes the attribute when the enclosing walk reaches it, parent first, and pins the adopter to the element. Its first update then requests the adopter and calls it, which hydrates the element's render() against those nodes in place and wakes the elements inside it. A hydrate that throws drops the served nodes and renders cold, warning in development; with no adopter at all it does the same.

The brand is a static on the class this returns, so subclasses stay opted in and Base stays as it was. LightElementRenderer from lit-ui-router-ssr is the server half: it matches the brand.

Type Parameters ​

Type Parameter
T extends LitElementConstructor

Parameters ​

ParameterTypeDescription
BaseTthe consumer's LitElement class

Returns ​

T & LightDomHydratingConstructor

the class, branded

Example ​

ts
import { LitElement, html } from 'lit';
import { LightDomHydrating } from 'lit-ui-router-ssr/client';

class AppCard extends LightDomHydrating(LitElement) {
  render() {
    return html`<p>card</p>`;
  }
}