Class: SignalsController<T>#

lit.SignalsController

Lit ReactiveController that connects a reactive object or domain store to a Lit element.

Remarks

When the element connects to the DOM, SignalsController establishes a reactive effect that listens to mutations on the target object and triggers host.requestUpdate(). When the element disconnects, the effect is automatically disposed.

Example

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { SignalsController } from '@banksia/signals/lit';
import { counterStore } from './counter-store';

@customElement('counter-view')
export class CounterView extends LitElement {
  private ctrl = new SignalsController(this, counterStore);

  render() {
    return html`<p>Count: ${counterStore.count}</p>`;
  }
}

Type parameters#

Implements#

• ReactiveController

Table of contents#

Constructors#

• constructor

Properties#

• disposeEffect
• host
• target

Methods#

• hostConnected
• hostDisconnected

Constructors#

constructor#

new SignalsController<T>(host, target)

Creates a new SignalsController instance and registers it with the host element.

Type parameters#

Parameters#

Properties#

disposeEffect#

Private Optional disposeEffect: () => void

Type declaration#

(): void

Returns#

void

host#

Private host: ReactiveControllerHost

target#

Private target: T

Methods#

hostConnected#

hostConnected(): void

Subscribes to the reactive target when the host connects to the DOM.

Returns#

void

Implementation of#

ReactiveController.hostConnected

hostDisconnected#

hostDisconnected(): void

Disposes the reactive subscription when the host disconnects from the DOM.

Returns#

void

Implementation of#

ReactiveController.hostDisconnected