lwr-outlet

An outlet dynamically renders view components, which display when an application navigates to a location.

Properties

Property	Type	Required/Optional	Description
`view-name`	String	Optional	The key of the `ViewSet` entry to display. The default value is `default`.
`refocus-off`	Boolean	Optional	Refocusing is on by default for accessibility. If `refocus-off` is present, the outlet doesn't put the browser focus on the view component when it loads.

Events

An outlet component fires these events:

onviewchange
- A handler for the viewchange event that is dispatched whenever the view component changes. event.detail is the view component class.

type Constructor<T = object> = new (...args: any[]) => T;
interface Constructable<T = object> {
    constructor: Constructor<T>
}
interface ViewChangePayload {
    detail: Constructable;
}

onviewerror
- A handler for the viewerror event that is dispatched whenever the view component cannot be rendered. event.detail is the error and stack.

interface ViewErrorPayload {
  detail: {
    error: Error,
    stack: string,
  };
}

Usage

An outlet dynamically renders view components. The lwr-outlet Lightning web component displays the current view component in the DOM.

This process is naturally lazy. The view isn't imported until the outlet consumes it, so any unused views aren't fetched. When the router's view state changes, the outlet is flagged to display the vivew. At that point, if the view module hasn't been fetched already, there may be an async process to retrieve it.

<template>
    <lwr-router-container>
        <lwr-outlet refocus-off onviewchange={onViewChange} onviewerror={onViewError}>
            <div slot="error">View component cannot display</div>
        </lwr-outlet>
    </lwr-router-container>
</template>

It's possible for a route definition handler to return multiple views, like this:

import type { Module, RouteHandlerCallback } from "lwr/router";

export default class HomeHandler {
  callback: RouteHandlerCallback;

  constructor(callback: RouteHandlerCallback) {
    this.callback = callback;
  }

  dispose(): void {}

  update(): void {
    this.callback({
      viewset: {
        // return multiple views
        default: (): Promise<Module> => import("my/home"),
        nav: (): Promise<Module> => import("my/homeNav"),
        footer: (): Promise<Module> => import("my/homeInfo"),
      },
    });
  }
}

You can use multiple outlets to display all the current view components by setting different view-name values.

<template>
    <lwr-router-container>
        <lwr-outlet view-name="nav"></lwr-outlet>
        <lwr-outlet><!-- default view --></lwr-outlet>
        <lwr-outlet view-name="footer"></lwr-outlet>
    </lwr-router-container>
</template>