lit-ui-router / RoutedLitElement

Interface: RoutedLitElement<T>

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

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

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)

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:284

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:289