---
url: >-
  https://lit-ui-router.dev/api/lit-ui-router-ssr/client/functions/LightDomHydrating.md
---
[lit-ui-router-ssr](../../index.md) / [client](../index.md) / LightDomHydrating

# Function: LightDomHydrating()

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

Defined in: [packages/lit-ui-router-ssr/src/light-dom.ts:77](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router-ssr/src/light-dom.ts#L77)

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`](../type-aliases/LitElementConstructor.md) |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `Base` | `T` | the consumer's `LitElement` class |

## Returns

`T` & [`LightDomHydratingConstructor`](../interfaces/LightDomHydratingConstructor.md)

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>`;
  }
}
```