lwr-outlet

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

PropertyTypeRequired/OptionalDescription
view-nameStringOptionalThe key of the ViewSet entry to display. The default value is default.
refocus-offBooleanOptionalRefocusing 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.

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.
  • onviewerror
    • A handler for the viewerror event that is dispatched whenever the view component cannot be rendered. event.detail is the error and stack.

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.

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

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