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.



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

hostConnected(): void

Permalink to hostConnected

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.

hostDisconnected(): void

Permalink to hostDisconnected

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.

hostUpdate(): void

Permalink to hostUpdate

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


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

hostUpdated(): void

Permalink to hostUpdated

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.


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

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


removeController(controller): void

Permalink to removeController

Removes a controller from the host.


requestUpdate(): void

Permalink to requestUpdate

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