lit-ui-router / RoutedLitElement

Interface: RoutedLitElement<T>

Defined in: packages/lit-ui-router/src/interface.ts:327

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

The class should extend LitElement. The router delivers UIViewInjectedProps 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

import { html, LitElement } from 'lit';
import type {
  LitStateDeclaration,
  UIRouterLit,
  UIViewInjectedProps,
} from 'lit-ui-router';

declare const router: UIRouterLit;

class UserList extends LitElement {
  _uiViewProps: UIViewInjectedProps;

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

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

const usersState: LitStateDeclaration = {
  name: 'users',
  url: '/users',
  component: UserList
};
router.stateRegistry.register(usersState);

Argless constructor with property injection (typical Lit)

import { html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import type { UIViewInjectedProps } from 'lit-ui-router';

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

Type Parameters

Type Parameter	Default type
T extends DefaultResolvesType	DefaultResolvesType

Constructors

Constructor

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

Defined in: packages/lit-ui-router/src/interface.ts:334

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

Parameters

Parameter	Type
props	UIViewInjectedProps<T>

Returns

LitElement & { _uiViewProps?: UIViewInjectedProps<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:340