stenciljs · OS-paulvisciano · Jan 21, 2026 · Copilot · Jan 21, 2026 · Copilot
@@ -115,4 +115,5 @@ const KEEP_IMPORTS = new Set([
   'jsx',
   'jsxs',
   'jsxDEV',
+  'ReactiveControllerHost',
 ]);
@@ -638,6 +638,47 @@ export interface ComponentInterface {
   [memberName: string]: any;
 }
 
+/**
+ * Interface for reactive controllers that can be attached to a ReactiveControllerHost.
+ * Controllers implement lifecycle hooks that are called by the host during component lifecycle.
+ */
+export interface ReactiveController {
+  hostConnected?(): void;
+  hostDisconnected?(): void;
+  hostWillLoad?(): Promise<void> | void;
+  hostDidLoad?(): void;
+  hostWillRender?(): Promise<void> | void;
+  hostDidRender?(): void;
+  hostWillUpdate?(): Promise<void> | void;
- * Interface for reactive controllers that can be attached to a ReactiveControllerHost.
- * Controllers implement lifecycle hooks that are called by the host during component lifecycle.
- */
-export interface ReactiveController {
-  hostConnected?(): void;
-  hostDisconnected?(): void;
-  hostWillLoad?(): Promise<void> | void;
-  hostDidLoad?(): void;
-  hostWillRender?(): Promise<void> | void;
-  hostDidRender?(): void;
-  hostWillUpdate?(): Promise<void> | void;
+ * Interface for reactive controllers that can be attached to a {@link ReactiveControllerHost}.
+ *
+ * Controllers implement lifecycle hooks that are called by the host at specific points in the
+ * component's lifecycle. These hooks mirror the {@link ComponentInterface} lifecycle methods
+ * and allow cross‑cutting logic (such as state management, subscriptions, or side‑effects)
+ * to be encapsulated and reused across multiple components.
+ */
+export interface ReactiveController {
+  /**
+   * Called when the host component is connected to the DOM.
+   *
+   * This corresponds to the host's `connectedCallback`. Use this hook to perform setup
+   * work that depends on the host being attached, such as registering event listeners
+   * on global objects or starting subscriptions.
+   */
+  hostConnected?(): void;
+
+  /**
+   * Called when the host component is disconnected from the DOM.
+   *
+   * This corresponds to the host's `disconnectedCallback`. Use this hook to clean up
+   * any work started in {@link ReactiveController.hostConnected}, such as removing
+   * event listeners, cancelling timers, or disposing of subscriptions.
+   */
+  hostDisconnected?(): void;
+
+  /**
+   * Called before the host component has loaded and before its first render.
+   *
+   * This corresponds to the host's `componentWillLoad`. Use this hook to perform
+   * asynchronous or synchronous setup that should complete before the initial
+   * render, such as fetching data or initializing controller state.
+   *
+   * This hook is only called once during the lifetime of the host.
+   */
+  hostWillLoad?(): Promise<void> | void;
+
+  /**
+   * Called after the host component has loaded and completed its first render.
+   *
+   * This corresponds to the host's `componentDidLoad`. Use this hook for logic that
+   * depends on the host's initial DOM being rendered, such as measuring layout or
+   * interacting with rendered child elements.
+   *
+   * This hook is only called once during the lifetime of the host.
+   */
+  hostDidLoad?(): void;
+
+  /**
+   * Called before the host component is about to render.
+   *
+   * This corresponds to the host's `componentWillRender`. Use this hook to perform
+   * last‑minute state adjustments before a render is triggered. It may be called
+   * multiple times over the life of the host as it re‑renders.
+   */
+  hostWillRender?(): Promise<void> | void;
+
+  /**
+   * Called after the host component has just rendered.
+   *
+   * This corresponds to the host's `componentDidRender`. Use this hook to perform
+   * work that depends on the latest rendered DOM, such as DOM measurements or
+   * non‑reactive side‑effects.
+   *
+   * It may be called multiple times over the life of the host as it re‑renders.
+   */
+  hostDidRender?(): void;
+
+  /**
+   * Called before the host component updates and re‑renders due to a state or prop change.
+   *
+   * This corresponds to the host's `componentWillUpdate`. Use this hook to react to
+   * changes before the DOM is updated. It may be called multiple times throughout the
+   * life of the host as it updates.
+   *
+   * This hook is not called for the initial render.
+   */
+  hostWillUpdate?(): Promise<void> | void;
+
+  /**
+   * Called after the host component has updated and re‑rendered.
+   *
+   * This corresponds to the host's `componentDidUpdate`. Use this hook to perform
+   * side‑effects that depend on the updated DOM or state after an update.
+   *
+   * It may be called multiple times throughout the life of the host as it updates,
+   * and is not called for the initial render.
+   */
- * Interface for reactive controllers that can be attached to a ReactiveControllerHost.
- * Controllers implement lifecycle hooks that are called by the host during component lifecycle.
- */
-export interface ReactiveController {
-  hostConnected?(): void;
-  hostDisconnected?(): void;
-  hostWillLoad?(): Promise<void> | void;
-  hostDidLoad?(): void;
-  hostWillRender?(): Promise<void> | void;
-  hostDidRender?(): void;
-  hostWillUpdate?(): Promise<void> | void;
+ * Interface for reactive controllers that can be attached to a {@link ReactiveControllerHost}.
+ *
+ * Controllers implement lifecycle hooks that are called by the host at specific points in the
+ * component's lifecycle. These hooks mirror the {@link ComponentInterface} lifecycle methods
+ * and allow cross‑cutting logic (such as state management, subscriptions, or side‑effects)
+ * to be encapsulated and reused across multiple components.
+ */
+export interface ReactiveController {
+  /**
+   * Called when the host component is connected to the DOM.
+   *
+   * This corresponds to the host's `connectedCallback`. Use this hook to perform setup
+   * work that depends on the host being attached, such as registering event listeners
+   * on global objects or starting subscriptions.
+   */
+  hostConnected?(): void;
+
+  /**
+   * Called when the host component is disconnected from the DOM.
+   *
+   * This corresponds to the host's `disconnectedCallback`. Use this hook to clean up
+   * any work started in {@link ReactiveController.hostConnected}, such as removing
+   * event listeners, cancelling timers, or disposing of subscriptions.
+   */
+  hostDisconnected?(): void;
+
+  /**
+   * Called before the host component has loaded and before its first render.
+   *
+   * This corresponds to the host's `componentWillLoad`. Use this hook to perform
+   * asynchronous or synchronous setup that should complete before the initial
+   * render, such as fetching data or initializing controller state.
+   *
+   * This hook is only called once during the lifetime of the host.
+   */
+  hostWillLoad?(): Promise<void> | void;
+
+  /**
+   * Called after the host component has loaded and completed its first render.
+   *
+   * This corresponds to the host's `componentDidLoad`. Use this hook for logic that
+   * depends on the host's initial DOM being rendered, such as measuring layout or
+   * interacting with rendered child elements.
+   *
+   * This hook is only called once during the lifetime of the host.
+   */
+  hostDidLoad?(): void;
+
+  /**
+   * Called before the host component is about to render.
+   *
+   * This corresponds to the host's `componentWillRender`. Use this hook to perform
+   * last‑minute state adjustments before a render is triggered. It may be called
+   * multiple times over the life of the host as it re‑renders.
+   */
+  hostWillRender?(): Promise<void> | void;
+
+  /**
+   * Called after the host component has just rendered.
+   *
+   * This corresponds to the host's `componentDidRender`. Use this hook to perform
+   * work that depends on the latest rendered DOM, such as DOM measurements or
+   * non‑reactive side‑effects.
+   *
+   * It may be called multiple times over the life of the host as it re‑renders.
+   */
+  hostDidRender?(): void;
+
+  /**
+   * Called before the host component updates and re‑renders due to a state or prop change.
+   *
+   * This corresponds to the host's `componentWillUpdate`. Use this hook to react to
+   * changes before the DOM is updated. It may be called multiple times throughout the
+   * life of the host as it updates.
+   *
+   * This hook is not called for the initial render.
+   */
+  hostWillUpdate?(): Promise<void> | void;
+
+  /**
+   * Called after the host component has updated and re‑rendered.
+   *
+   * This corresponds to the host's `componentDidUpdate`. Use this hook to perform
+   * side‑effects that depend on the updated DOM or state after an update.
+   *
+   * It may be called multiple times throughout the life of the host as it updates,
+   * and is not called for the initial render.
+   */
+  hostDidUpdate?(): void;
+}
+
+/**
+ * Base class that implements ComponentInterface and provides reactive controller functionality.
+ * Components can extend this class to enable reactive controller composition.
+ *
+ * Known Limitation: Components extending ReactiveControllerHost cannot use
+ * `<Host>` as their root element in the render method. This is because
+ * ReactiveControllerHost does not extend HTMLElement. Instead, return a
+ * regular element (like `<div>`) as the root.
+ */
+export declare class ReactiveControllerHost implements ComponentInterface {
+  controllers: Set<ReactiveController>;
-  controllers: Set<ReactiveController>;
+  readonly controllers: Set<ReactiveController>;
-  controllers: Set<ReactiveController>;
+  readonly controllers: Set<ReactiveController>;
+
+  addController(controller: ReactiveController): void;
+  removeController(controller: ReactiveController): void;
+  requestUpdate(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  componentDidRender(): void;
+  componentWillUpdate(): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  componentWillRender(): void;
-  componentDidRender(): void;
-  componentWillUpdate(): void;
+  componentWillLoad(): Promise<void> | void;
+  componentDidLoad(): void;
+  componentWillRender(): Promise<void> | void;
+  componentDidRender(): void;
+  componentWillUpdate(): Promise<void> | void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  componentWillRender(): void;
-  componentDidRender(): void;
-  componentWillUpdate(): void;
+  componentWillLoad(): Promise<void> | void;
+  componentDidLoad(): void;
+  componentWillRender(): Promise<void> | void;
+  componentDidRender(): void;
+  componentWillUpdate(): Promise<void> | void;
+  componentDidUpdate(): void;
+  [memberName: string]: any;
+}
+
 // General types important to applications using stencil built components
 export interface EventEmitter<T = any> {
   emit: (data?: T) => CustomEvent<T>;

@@ -229,6 +229,7 @@ export {
   postUpdateComponent,
   proxyComponent,
   proxyCustomElement,
+  ReactiveControllerHost,
   renderVdom,
   setAssetPath,
   setMode,

@@ -19,6 +19,7 @@ export type {
   PropOptions,
   QueueApi,
   RafCallback,
+  ReactiveController,
   VNode,
   VNodeData,
 } from '../stencil-public-runtime';
@@ -45,6 +46,7 @@ export {
   Mixin,
   MixinFactory,
   Prop,
+  ReactiveControllerHost,
   readTask,
   render,
   setAssetPath,

@@ -13,6 +13,7 @@ export { setNonce } from './nonce';
 export { parsePropertyValue } from './parse-property-value';
 export { setPlatformOptions } from './platform-options';
 export { proxyComponent } from './proxy-component';
+export { ReactiveController, ReactiveControllerHost } from './reactive-controller';
 export { render } from './render';
 export { HYDRATED_STYLE_ID } from './runtime-constants';
 export { getValue, setValue } from './set-value';

@@ -0,0 +1,84 @@
+import type { ComponentInterface } from '../declarations/stencil-public-runtime';
+import { forceUpdate } from './update-component';
+
+export interface ReactiveController {
+  hostConnected?(): void;
+  hostDisconnected?(): void;
+  hostWillLoad?(): Promise<void> | void;
+  hostDidLoad?(): void;
+  hostWillRender?(): Promise<void> | void;
+  hostDidRender?(): void;
+  hostWillUpdate?(): Promise<void> | void;
-export interface ReactiveController {
-  hostConnected?(): void;
-  hostDisconnected?(): void;
-  hostWillLoad?(): Promise<void> | void;
-  hostDidLoad?(): void;
-  hostWillRender?(): Promise<void> | void;
-  hostDidRender?(): void;
-  hostWillUpdate?(): Promise<void> | void;
+export interface ReactiveController {
+  /**
+   * Called when the host component's `connectedCallback` is invoked.
+   * Use this to perform setup that depends on the host being connected to the DOM.
+   */
+  hostConnected?(): void;
+
+  /**
+   * Called when the host component's `disconnectedCallback` is invoked.
+   * Use this to perform cleanup when the host is removed from the DOM.
+   */
+  hostDisconnected?(): void;
+
+  /**
+   * Called when the host component's `componentWillLoad` lifecycle runs.
+   * Use this to perform work before the host first renders.
+   */
+  hostWillLoad?(): Promise<void> | void;
+
+  /**
+   * Called when the host component's `componentDidLoad` lifecycle runs.
+   * Use this to perform work after the host has finished its initial render.
+   */
+  hostDidLoad?(): void;
+
+  /**
+   * Called when the host component's `componentWillRender` lifecycle runs.
+   * Use this to react to state changes before each render.
+   */
+  hostWillRender?(): Promise<void> | void;
+
+  /**
+   * Called when the host component's `componentDidRender` lifecycle runs.
+   * Use this to perform work after each render.
+   */
+  hostDidRender?(): void;
+
+  /**
+   * Called when the host component's `componentWillUpdate` lifecycle runs.
+   * Use this to react to prop or state changes before an update.
+   */
+  hostWillUpdate?(): Promise<void> | void;
+
+  /**
+   * Called when the host component's `componentDidUpdate` lifecycle runs.
+   * Use this to perform work after an update has been applied.
+   */
-export interface ReactiveController {
-  hostConnected?(): void;
-  hostDisconnected?(): void;
-  hostWillLoad?(): Promise<void> | void;
-  hostDidLoad?(): void;
-  hostWillRender?(): Promise<void> | void;
-  hostDidRender?(): void;
-  hostWillUpdate?(): Promise<void> | void;
+export interface ReactiveController {
+  /**
+   * Called when the host component's `connectedCallback` is invoked.
+   * Use this to perform setup that depends on the host being connected to the DOM.
+   */
+  hostConnected?(): void;
+
+  /**
+   * Called when the host component's `disconnectedCallback` is invoked.
+   * Use this to perform cleanup when the host is removed from the DOM.
+   */
+  hostDisconnected?(): void;
+
+  /**
+   * Called when the host component's `componentWillLoad` lifecycle runs.
+   * Use this to perform work before the host first renders.
+   */
+  hostWillLoad?(): Promise<void> | void;
+
+  /**
+   * Called when the host component's `componentDidLoad` lifecycle runs.
+   * Use this to perform work after the host has finished its initial render.
+   */
+  hostDidLoad?(): void;
+
+  /**
+   * Called when the host component's `componentWillRender` lifecycle runs.
+   * Use this to react to state changes before each render.
+   */
+  hostWillRender?(): Promise<void> | void;
+
+  /**
+   * Called when the host component's `componentDidRender` lifecycle runs.
+   * Use this to perform work after each render.
+   */
+  hostDidRender?(): void;
+
+  /**
+   * Called when the host component's `componentWillUpdate` lifecycle runs.
+   * Use this to react to prop or state changes before an update.
+   */
+  hostWillUpdate?(): Promise<void> | void;
+
+  /**
+   * Called when the host component's `componentDidUpdate` lifecycle runs.
+   * Use this to perform work after an update has been applied.
+   */
+  hostDidUpdate?(): void;
+}
+
+/**
+ * Base class for components that want to use reactive controllers.
+ *
+ * Components extending this class can use the composition pattern to share
+ * stateful logic via reactive controllers.
+ *
+ * Known Limitation: Components extending ReactiveControllerHost cannot use
+ * `<Host>` as their root element in the render method. This is because
+ * ReactiveControllerHost does not extend HTMLElement. Instead, return a
+ * regular element (like `<div>`) as the root.
+ *
+ * @example
+ * ```tsx
+ * @Component({ tag: 'my-component' })
+ * export class MyComponent extends ReactiveControllerHost {
+ *   private myController = new MyController(this);
+ *
+ *   render() {
+ *     return <div>...</div>; // Use <div>, not <Host>
+ *   }
+ * }
+ * ```
+ */
+export class ReactiveControllerHost implements ComponentInterface {
+  controllers = new Set<ReactiveController>();
-  controllers = new Set<ReactiveController>();
+  readonly controllers = new Set<ReactiveController>();
-  controllers = new Set<ReactiveController>();
+  readonly controllers = new Set<ReactiveController>();
+
+  addController(controller: ReactiveController) {
+    this.controllers.add(controller);
+  }
+
+  removeController(controller: ReactiveController) {
+    this.controllers.delete(controller);
+  }
+
+  requestUpdate() {
+    forceUpdate(this);
+  }
+
+  connectedCallback() {
+    this.controllers.forEach((controller) => controller.hostConnected?.());
+  }
+
+  disconnectedCallback() {
+    this.controllers.forEach((controller) => controller.hostDisconnected?.());
+  }
+
+  componentWillLoad() {
+    this.controllers.forEach((controller) => controller.hostWillLoad?.());
+  }
+
+  componentDidLoad() {
+    this.controllers.forEach((controller) => controller.hostDidLoad?.());
+  }
+
+  componentWillRender() {
+    this.controllers.forEach((controller) => controller.hostWillRender?.());
+  }
+
+  componentDidRender() {
+    this.controllers.forEach((controller) => controller.hostDidRender?.());
+  }
+
+  componentWillUpdate() {
+    this.controllers.forEach((controller) => controller.hostWillUpdate?.());
-  componentWillLoad() {
-    this.controllers.forEach((controller) => controller.hostWillLoad?.());
-  }
-
-  componentDidLoad() {
-    this.controllers.forEach((controller) => controller.hostDidLoad?.());
-  }
-
-  componentWillRender() {
-    this.controllers.forEach((controller) => controller.hostWillRender?.());
-  }
-
-  componentDidRender() {
-    this.controllers.forEach((controller) => controller.hostDidRender?.());
-  }
-
-  componentWillUpdate() {
-    this.controllers.forEach((controller) => controller.hostWillUpdate?.());
+  componentWillLoad(): Promise<void> | void {
+    const promises: Promise<void>[] = [];
+    this.controllers.forEach((controller) => {
+      const result = controller.hostWillLoad?.();
+      if (result instanceof Promise) {
+        promises.push(result);
+      }
+    });
+
+    if (promises.length > 0) {
+      return Promise.all(promises).then(() => undefined);
+    }
+  }
+
+  componentDidLoad() {
+    this.controllers.forEach((controller) => controller.hostDidLoad?.());
+  }
+
+  componentWillRender(): Promise<void> | void {
+    const promises: Promise<void>[] = [];
+    this.controllers.forEach((controller) => {
+      const result = controller.hostWillRender?.();
+      if (result instanceof Promise) {
+        promises.push(result);
+      }
+    });
+
+    if (promises.length > 0) {
+      return Promise.all(promises).then(() => undefined);
+    }
+  }
+
+  componentDidRender() {
+    this.controllers.forEach((controller) => controller.hostDidRender?.());
+  }
+
+  componentWillUpdate(): Promise<void> | void {
+    const promises: Promise<void>[] = [];
+    this.controllers.forEach((controller) => {
+      const result = controller.hostWillUpdate?.();
+      if (result instanceof Promise) {
+        promises.push(result);
+      }
+    });
+
+    if (promises.length > 0) {
+      return Promise.all(promises).then(() => undefined);
+    }
-  componentWillLoad() {
-    this.controllers.forEach((controller) => controller.hostWillLoad?.());
-  }
-
-  componentDidLoad() {
-    this.controllers.forEach((controller) => controller.hostDidLoad?.());
-  }
-
-  componentWillRender() {
-    this.controllers.forEach((controller) => controller.hostWillRender?.());
-  }
-
-  componentDidRender() {
-    this.controllers.forEach((controller) => controller.hostDidRender?.());
-  }
-
-  componentWillUpdate() {
-    this.controllers.forEach((controller) => controller.hostWillUpdate?.());
+  componentWillLoad(): Promise<void> | void {
+    const promises: Promise<void>[] = [];
+    this.controllers.forEach((controller) => {
+      const result = controller.hostWillLoad?.();
+      if (result instanceof Promise) {
+        promises.push(result);
+      }
+    });
+
+    if (promises.length > 0) {
+      return Promise.all(promises).then(() => undefined);
+    }
+  }
+
+  componentDidLoad() {
+    this.controllers.forEach((controller) => controller.hostDidLoad?.());
+  }
+
+  componentWillRender(): Promise<void> | void {
+    const promises: Promise<void>[] = [];
+    this.controllers.forEach((controller) => {
+      const result = controller.hostWillRender?.();
+      if (result instanceof Promise) {
+        promises.push(result);
+      }
+    });
+
+    if (promises.length > 0) {
+      return Promise.all(promises).then(() => undefined);
+    }
+  }
+
+  componentDidRender() {
+    this.controllers.forEach((controller) => controller.hostDidRender?.());
+  }
+
+  componentWillUpdate(): Promise<void> | void {
+    const promises: Promise<void>[] = [];
+    this.controllers.forEach((controller) => {
+      const result = controller.hostWillUpdate?.();
+      if (result instanceof Promise) {
+        promises.push(result);
+      }
+    });
+
+    if (promises.length > 0) {
+      return Promise.all(promises).then(() => undefined);
+    }
+  }
+
+  componentDidUpdate() {
+    this.controllers.forEach((controller) => controller.hostDidUpdate?.());
-  connectedCallback() {
-    this.controllers.forEach((controller) => controller.hostConnected?.());
-  }
-
-  disconnectedCallback() {
-    this.controllers.forEach((controller) => controller.hostDisconnected?.());
-  }
-
-  componentWillLoad() {
-    this.controllers.forEach((controller) => controller.hostWillLoad?.());
-  }
-
-  componentDidLoad() {
-    this.controllers.forEach((controller) => controller.hostDidLoad?.());
-  }
-
-  componentWillRender() {
-    this.controllers.forEach((controller) => controller.hostWillRender?.());
-  }
-
-  componentDidRender() {
-    this.controllers.forEach((controller) => controller.hostDidRender?.());
-  }
-
-  componentWillUpdate() {
-    this.controllers.forEach((controller) => controller.hostWillUpdate?.());
-  }
-
-  componentDidUpdate() {
-    this.controllers.forEach((controller) => controller.hostDidUpdate?.());
+  private invokeControllerHook(hook: keyof ReactiveController) {
+    this.controllers.forEach((controller) => {
+      const callback = controller[hook];
+      if (typeof callback === 'function') {
+        try {
+          callback.call(controller);
+        } catch (error) {
+          // Ensure one controller's error doesn't prevent others from running
+          console.error(
+            `Error in ReactiveController ${String(hook)} hook:`,
+            error,
+          );
+        }
+      }
+    });
+  }
+
+  connectedCallback() {
+    this.invokeControllerHook('hostConnected');
+  }
+
+  disconnectedCallback() {
+    this.invokeControllerHook('hostDisconnected');
+  }
+
+  componentWillLoad() {
+    this.invokeControllerHook('hostWillLoad');
+  }
+
+  componentDidLoad() {
+    this.invokeControllerHook('hostDidLoad');
+  }
+
+  componentWillRender() {
+    this.invokeControllerHook('hostWillRender');
+  }
+
+  componentDidRender() {
+    this.invokeControllerHook('hostDidRender');
+  }
+
+  componentWillUpdate() {
+    this.invokeControllerHook('hostWillUpdate');
+  }
+
+  componentDidUpdate() {
+    this.invokeControllerHook('hostDidUpdate');
-  connectedCallback() {
-    this.controllers.forEach((controller) => controller.hostConnected?.());
-  }
-
-  disconnectedCallback() {
-    this.controllers.forEach((controller) => controller.hostDisconnected?.());
-  }
-
-  componentWillLoad() {
-    this.controllers.forEach((controller) => controller.hostWillLoad?.());
-  }
-
-  componentDidLoad() {
-    this.controllers.forEach((controller) => controller.hostDidLoad?.());
-  }
-
-  componentWillRender() {
-    this.controllers.forEach((controller) => controller.hostWillRender?.());
-  }
-
-  componentDidRender() {
-    this.controllers.forEach((controller) => controller.hostDidRender?.());
-  }
-
-  componentWillUpdate() {
-    this.controllers.forEach((controller) => controller.hostWillUpdate?.());
-  }
-
-  componentDidUpdate() {
-    this.controllers.forEach((controller) => controller.hostDidUpdate?.());
+  private invokeControllerHook(hook: keyof ReactiveController) {
+    this.controllers.forEach((controller) => {
+      const callback = controller[hook];
+      if (typeof callback === 'function') {
+        try {
+          callback.call(controller);
+        } catch (error) {
+          // Ensure one controller's error doesn't prevent others from running
+          console.error(
+            `Error in ReactiveController ${String(hook)} hook:`,
+            error,
+          );
+        }
+      }
+    });
+  }
+
+  connectedCallback() {
+    this.invokeControllerHook('hostConnected');
+  }
+
+  disconnectedCallback() {
+    this.invokeControllerHook('hostDisconnected');
+  }
+
+  componentWillLoad() {
+    this.invokeControllerHook('hostWillLoad');
+  }
+
+  componentDidLoad() {
+    this.invokeControllerHook('hostDidLoad');
+  }
+
+  componentWillRender() {
+    this.invokeControllerHook('hostWillRender');
+  }
+
+  componentDidRender() {
+    this.invokeControllerHook('hostDidRender');
+  }
+
+  componentWillUpdate() {
+    this.invokeControllerHook('hostWillUpdate');
+  }
+
+  componentDidUpdate() {
+    this.invokeControllerHook('hostDidUpdate');
+  }
+}
@@ -307,8 +307,6 @@ export namespace Components {
      */
     interface ExtendsRender {
     }
-    interface ExtendsViaHostCmp {
-    }
     /**
      * WatchCmp - Demonstrates
      * @Watch decorator inheritance
@@ -606,12 +604,6 @@ declare global {
         prototype: HTMLExtendsRenderElement;
         new (): HTMLExtendsRenderElement;
     };
-    interface HTMLExtendsViaHostCmpElement extends Components.ExtendsViaHostCmp, HTMLStencilElement {
-    }
-    var HTMLExtendsViaHostCmpElement: {
-        prototype: HTMLExtendsViaHostCmpElement;
-        new (): HTMLExtendsViaHostCmpElement;
-    };
     /**
      * WatchCmp - Demonstrates
      * @Watch decorator inheritance
@@ -708,7 +700,6 @@ declare global {
         "extends-mixin-cmp": HTMLExtendsMixinCmpElement;
         "extends-props-state": HTMLExtendsPropsStateElement;
         "extends-render": HTMLExtendsRenderElement;
-        "extends-via-host-cmp": HTMLExtendsViaHostCmpElement;
         "extends-watch": HTMLExtendsWatchElement;
         "inheritance-checkbox-group": HTMLInheritanceCheckboxGroupElement;
         "inheritance-radio-group": HTMLInheritanceRadioGroupElement;
@@ -906,8 +897,6 @@ declare namespace LocalJSX {
      */
     interface ExtendsRender {
     }
-    interface ExtendsViaHostCmp {
-    }
     /**
      * WatchCmp - Demonstrates
      * @Watch decorator inheritance
@@ -986,7 +975,6 @@ declare namespace LocalJSX {
         "extends-mixin-cmp": ExtendsMixinCmp;
         "extends-props-state": ExtendsPropsState;
         "extends-render": ExtendsRender;
-        "extends-via-host-cmp": ExtendsViaHostCmp;
         "extends-watch": ExtendsWatch;
         "inheritance-checkbox-group": InheritanceCheckboxGroup;
         "inheritance-radio-group": InheritanceRadioGroup;
@@ -1071,7 +1059,6 @@ declare module "@stencil/core" {
              * - CSS Class Inheritance: CSS classes from parent template maintained in component extension
              */
             "extends-render": LocalJSX.ExtendsRender & JSXBase.HTMLAttributes<HTMLExtendsRenderElement>;
-            "extends-via-host-cmp": LocalJSX.ExtendsViaHostCmp & JSXBase.HTMLAttributes<HTMLExtendsViaHostCmpElement>;
             /**
              * WatchCmp - Demonstrates
              * @Watch decorator inheritance

@@ -1,5 +1,4 @@
-import { Component, h, State, Element, Event, EventEmitter } from '@stencil/core';
-import { ReactiveControllerHost } from './reactive-controller-host.js';
+import { Component, h, ReactiveControllerHost, State, Element, Event, EventEmitter } from '@stencil/core';
 import { ValidationController } from './validation-controller.js';
 import { FocusController } from './focus-controller.js';
 
@@ -15,7 +14,7 @@ export class CheckboxGroupCmp extends ReactiveControllerHost {
 
   // Controllers via composition
   private validation = new ValidationController(this);
-  private focus = new FocusController(this);
+  private focusController = new FocusController(this);
 
   private inputId = `checkbox-group-${Math.random().toString(36).substr(2, 9)}`;
   private helperTextId = `${this.inputId}-helper-text`;
@@ -55,16 +54,16 @@ export class CheckboxGroupCmp extends ReactiveControllerHost {
   };
 
   private handleFocus = () => {
-    this.focus.handleFocus();
+    this.focusController.handleFocus();
   };
 
   private handleBlur = () => {
-    this.focus.handleBlur();
+    this.focusController.handleBlur();
     this.validation.handleBlur(this.values);
   };
 
   render() {
-    const focusState = this.focus.getFocusState();
+    const focusState = this.focusController.getFocusState();
     const validationData = this.validation.getValidationMessageData(this.helperTextId, this.errorTextId);
 
     return (

@@ -7,7 +7,7 @@
  * 3. Provides methods to handle focus lifecycle
  */
 import { forceUpdate } from '@stencil/core';
-import type { ReactiveControllerHost, ReactiveController } from './reactive-controller-host.js';
+import type { ReactiveControllerHost, ReactiveController } from '@stencil/core';
 
 export class FocusController implements ReactiveController {
   private host: ReactiveControllerHost;

@@ -1,5 +1,4 @@
-import { Component, h, State, Element, Event, EventEmitter } from '@stencil/core';
-import { ReactiveControllerHost } from './reactive-controller-host.js';
+import { Component, h, ReactiveControllerHost, State, Element, Event, EventEmitter } from '@stencil/core';
 import { ValidationController } from './validation-controller.js';
 import { FocusController } from './focus-controller.js';
 
@@ -15,7 +14,7 @@ export class RadioGroupCmp extends ReactiveControllerHost {
 
   // Controllers via composition
   private validation = new ValidationController(this);
-  private focus = new FocusController(this);
+  private focusController = new FocusController(this);
 
   private inputId = `radio-group-${Math.random().toString(36).substr(2, 9)}`;
   private helperTextId = `${this.inputId}-helper-text`;
@@ -50,16 +49,16 @@ export class RadioGroupCmp extends ReactiveControllerHost {
   };
 
   private handleFocus = () => {
-    this.focus.handleFocus();
+    this.focusController.handleFocus();
   };
 
   private handleBlur = () => {
-    this.focus.handleBlur();
+    this.focusController.handleBlur();
     this.validation.handleBlur(this.value);
   };
 
   render() {
-    const focusState = this.focus.getFocusState();
+    const focusState = this.focusController.getFocusState();
     const validationData = this.validation.getValidationMessageData(this.helperTextId, this.errorTextId);
 
     return (

@@ -1,5 +1,4 @@
-import { Component, h, State, Element } from '@stencil/core';
-import { ReactiveControllerHost } from './reactive-controller-host.js';
+import { Component, h, ReactiveControllerHost, State, Element } from '@stencil/core';
 import { ValidationController } from './validation-controller.js';
 import { FocusController } from './focus-controller.js';
 
@@ -13,7 +12,7 @@ export class TextInputCmp extends ReactiveControllerHost {
 
   // Controllers via composition
   private validation = new ValidationController(this);
-  private focus = new FocusController(this);
+  private focusController = new FocusController(this);
 
   private inputId = `text-input-${Math.random().toString(36).substr(2, 9)}`;
   private helperTextId = `${this.inputId}-helper-text`;
@@ -47,16 +46,16 @@ export class TextInputCmp extends ReactiveControllerHost {
   };
 
   private handleFocus = () => {
-    this.focus.handleFocus();
+    this.focusController.handleFocus();
   };
 
   private handleBlur = () => {
-    this.focus.handleBlur();
+    this.focusController.handleBlur();
     this.validation.handleBlur(this.value);
   };
 
   render() {
-    const focusState = this.focus.getFocusState();
+    const focusState = this.focusController.getFocusState();
     const validationState = this.validation.getValidationState();
     const validationData = this.validation.getValidationMessageData(this.helperTextId, this.errorTextId);
 

@@ -8,7 +8,7 @@
  * 4. Runs a callback provided by the host for validation logic
  */
 import { forceUpdate } from '@stencil/core';
-import type { ReactiveControllerHost, ReactiveController } from './reactive-controller-host.js';
+import type { ReactiveControllerHost, ReactiveController } from '@stencil/core';
 
 export class ValidationController implements ReactiveController {
   private host: ReactiveControllerHost;
-Original file line number
+Diff line change
@@ Expand Up / @@ -115,4 +115,5 @@ const KEEP_IMPORTS = new Set([ @@
       'jsx',
       'jsxs',
       'jsxDEV',
+      'ReactiveControllerHost',
     ]);