You're viewing docs for an older version of Lit. Click here for the latest version.

Controllers

A Reactive Controller is an object that enables sub-component code organization and reuse by aggregating the state, behavior, and lifecycle hooks related to a single feature.

Import

Details

Controllers are added to a host component, or other object that implements the ReactiveControllerHost interface, via the addController() method. They can hook their host components's lifecycle by implementing one or more of the lifecycle callbacks, or initiate an update of the host component by calling requestUpdate() on the host.

Methods and properties

Called when the host is connected to the component tree. For custom element hosts, this corresponds to the connectedCallback() lifecycle, which is only called when the component is connected to the document.

Called when the host is disconnected from the component tree. For custom element hosts, this corresponds to the disconnectedCallback() lifecycle, which is called the host or an ancestor component is disconnected from the document.

Called during the client-side host update, just before the host calls its own update.

Details

Code in update() can depend on the DOM as it is not called in server-side rendering.

Called after a host update, just before the host calls firstUpdated and updated. It is not called in server-side rendering.

An object that can host Reactive Controllers and call their lifecycle callbacks.

Import

Methods and properties

readonly updateComplete: Promise<boolean>

Permalink to updateComplete View source

Returns a Promise that resolves when the host has completed updating. The Promise value is a boolean that is true if the element completed the update without triggering another update. The Promise result is false if a property was set inside updated(). If the Promise is rejected, an exception was thrown during the update.

addController(controller): void

Permalink to addController View source

Adds a controller to the host, which sets up the controller's lifecycle methods to be called with the host's lifecycle.

Parameters
controller
ReactiveController

removeController(controller): void

Permalink to removeController View source

Removes a controller from the host.

Parameters
controller
ReactiveController

Requests a host update which is processed asynchronously. The update can be waited on via the updateComplete property.