---
url: https://lit-ui-router.dev/api/reference/types/RoutedLitElement.md
---
[lit-ui-router](../index.md) / RoutedLitElement

# Interface: RoutedLitElement\<T>

Defined in: [packages/lit-ui-router/src/interface.ts:282](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/interface.ts#L282)

A LitElement class constructor that can be used in state declarations.

The class should extend LitElement. The router delivers [UIViewInjectedProps](UIViewInjectedProps.md)
two ways: as a constructor argument on first render, and by assigning the
`_uiViewProps` property on every render (the only channel that fires when a
`sticky` instance is reused). Constructor args are optional — argless
constructors, as is typical for custom elements, work too. The `sticky`
property can be set to `true` to reuse the same component instance across
state transitions.

## Examples

**Constructor injection**

```ts
class UserList extends LitElement {
  _uiViewProps: UIViewInjectedProps;

  constructor(props: UIViewInjectedProps) {
    super();
    this._uiViewProps = props;
  }

  render() {
    return html`<h1>Users</h1>`;
  }
}

router.stateRegistry.register({
  name: 'users',
  url: '/users',
  component: UserList
});
```

**Argless constructor with property injection (typical Lit)**

```ts
class UserDetail extends LitElement {
  // reactive property: sticky reuse re-renders when props are reassigned
  @property({ attribute: false }) _uiViewProps?: UIViewInjectedProps;

  render() {
    return html`<h1>${this._uiViewProps?.transition?.params().id}</h1>`;
  }
}
```

## Extended by

* [`LitViewDeclarationElement`](LitViewDeclarationElement.md)

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
|  `T` *extends* [`DefaultResolvesType`](DefaultResolvesType.md) | [`DefaultResolvesType`](DefaultResolvesType.md) |

## Constructors

### Constructor

```ts
new RoutedLitElement(props): LitElement & {
  _uiViewProps?: UIViewInjectedProps<T>;
};
```

Defined in: [packages/lit-ui-router/src/interface.ts:289](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/interface.ts#L289)

Construct signature. The router always passes props; classes may declare
the parameter required, optional, or not at all.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`UIViewInjectedProps`](UIViewInjectedProps.md)<`T`> |

#### Returns

[`LitElement`](https://lit.dev/docs/api/LitElement/) & {
`_uiViewProps?`: [`UIViewInjectedProps`](UIViewInjectedProps.md)<`T`>;
}

## Properties

| Property | Type | Description | Defined in |
| ------ | ------ | ------ | ------ |
|  `sticky?` | `boolean` | If true, the same component instance is reused across state transitions | [packages/lit-ui-router/src/interface.ts:295](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/interface.ts#L295) |