Lit UI Router

lit-ui-router / UiView

Class: UiView ​

Defined in: packages/lit-ui-router/src/ui-view.ts:162

Slots ​

  • default — <ui-view> renders slotted content as fallback whenever no routed component is active.

Events ​

  • ui-router-context — This event is fired to obtain the uiRouter instance, when not directly provided. Once obtained, the <ui-view> listens and provides the uiRouter to descendants.
  • ui-view-context — This event is fired to obtain the parent <ui-view>. It answers the community context-request protocol for {@link parentUiViewContext} with itself, from the same listener position, so an element built on @lit/context finds its enclosing view too. A view never answers its own request, so a nested <ui-view> gets the view above it.

Extends ​

other ​

adoptProvidedRouter() ​

ts
protected adoptProvidedRouter(): void;

Defined in: packages/lit-ui-router/src/ui-view.ts:472

Adopts the router the provider now offers, when this view registered without it or with another.

Runs whenever the router this view holds is one a seek produced, or none: a provider that upgraded late, or a different <ui-router> this view has just been attached under, supersedes it. A router the app assigned is kept.

lit replays a pre-upgrade property inside the element's first update, not at upgrade, so <ui-router> can run connectedCallback with uiRouter still undefined and provide an instance of its own; a <ui-view> connecting in between registers with that one and never sees a transition. Firefox upgrades a detached subtree later than Chrome and WebKit, so declarative shadow DOM parsed off-document reaches this there first.

registerUIView syncs, so the re-registered view picks up the current state without waiting for the next transition.

A subclass that renders against a registration made elsewhere calls it before the update that reads the component.

Returns ​

void

captureContent() ​

ts
protected captureContent(): void;

Defined in: packages/lit-ui-router/src/ui-view.ts:533

Takes the authored children ahead of any render as this view's fallback set.

The nodes are moved, never copied, so they keep their identity and any binding an enclosing template holds on them stays live. The first update stands them back up when no component occupies the view.

A view whose first child is a render marker holds a render's output from the first child down, so it captures nothing and the nodes stay where they stand: they are lit's own on a re-attached view, and never ours to move.

Returns ​

void

captureContentInPlace() ​

ts
protected captureContentInPlace(): void;

Defined in: packages/lit-ui-router/src/ui-view.ts:556

Takes the authored children standing ahead of any render as this view's fallback set, leaving them where they are.

The nodes are not parked: they already stand in the document, and the update that follows parks them only if a component occupies the view, like any other fallback set. A view whose children are a render's from the first one down captures nothing.

This is the capture for a subclass that fills the element before its first render, where captureContent at connect would be too early.

Returns ​

void

name ​

ts
name: string = '';

Defined in: packages/lit-ui-router/src/ui-view.ts:165

the view name this viewport fills; empty selects the $default view

render() ​

ts
render(): 
  | TemplateResult
  | typeof nothing
  | typeof noChange;

Defined in: packages/lit-ui-router/src/ui-view.ts:876

The routed component's template, or nothing while the fallback set stands in the light DOM on its own.

Returns ​

| TemplateResult | typeof nothing | typeof noChange

Overrides ​

LitElement.render

routedElement ​

Get Signature ​

ts
get routedElement(): Element | null;

Defined in: packages/lit-ui-router/src/ui-view.ts:711

The element the routed component rendered: a class component's instance, or the first element a template component rendered. null while the fallback set shows.

The view's children are internal, so read the routed element here rather than through firstElementChild or child selectors. While a class component replaces another, both stand until the incoming element has rendered, and this is the incoming one.

The same element carries the routed attribute, for CSS: ui-view > [routed].

Returns ​

Element | null

uiRouter ​

ts
uiRouter: UIRouterLit;

Defined in: packages/lit-ui-router/src/ui-view.ts:172

<ui-view> can be used without <ui-router> by providing the uiRouter property directly.

updates ​

firstUpdated() ​

ts
protected firstUpdated(changed): void;

Defined in: packages/lit-ui-router/src/ui-view.ts:864

Invoked when the element is first updated. Implement to perform one time work on the element after update.

ts
firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Parameters ​

ParameterType
changedPropertyValueMap<any> | Map<PropertyKey, unknown>

Returns ​

void

Overrides ​

LitElement.firstUpdated