--- url: https://lit-ui-router.dev/api/reference/components/UiView.md --- [lit-ui-router](../index.md) / UiView # Class: UiView Defined in: [packages/lit-ui-router/src/ui-view.ts:192](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/ui-view.ts#L192) ## Slots * default — \ 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 \ listens and provides the uiRouter to descendants. * ui-view-context — This event is fired to obtain the parent \. 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 \ gets the view above it. ## Extends * [`LitElement`](https://lit.dev/docs/api/LitElement/) ## other ### adoptProvidedRouter() ```ts protected adoptProvidedRouter(): void; ``` Defined in: [packages/lit-ui-router/src/ui-view.ts:502](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/ui-view.ts#L502) 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 `` 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 `` can run `connectedCallback` with `uiRouter` still undefined and provide an instance of its own; a `` 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:563](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/ui-view.ts#L563) 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:586](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/ui-view.ts#L586) 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](#capturecontent) at connect would be too early. #### Returns `void` *** ### name ```ts name: string = ''; ``` Defined in: [packages/lit-ui-router/src/ui-view.ts:195](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/ui-view.ts#L195) 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:906](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/ui-view.ts#L906) The routed component's template, or nothing while the fallback set stands in the light DOM on its own. #### Returns | [`TemplateResult`](https://lit.dev/docs/api/templates/#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:741](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/ui-view.ts#L741) 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:202](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/ui-view.ts#L202) \ can be used without \ by providing the uiRouter property directly. ## updates ### firstUpdated() ```ts protected firstUpdated(changed): void; ``` Defined in: [packages/lit-ui-router/src/ui-view.ts:894](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/ui-view.ts#L894) 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 | Parameter | Type | | ------ | ------ | | `changed` | `PropertyValueMap`<`any`> | `Map`<`PropertyKey`, `unknown`> | #### Returns `void` #### Overrides `LitElement.firstUpdated`