Class Component`Abstract`

Base class for web components.

Hierarchy (View Summary)

EmitterElement
- Component

Implements

Advanced

renderOptions

renderOptions: RenderOptions = ...

`Readonly`renderRoot

renderRoot: HTMLElement | ShadowRoot = ...

`Static`shadowRootOptions

shadowRootOptions: ShadowRootInit = ...

abortSignal

get abortSignal(): AbortSignal
An AbortSignal which will trigger when this component is disconnected from the DOM.

This can be passed along to asynchronous tasks such as fetch initiated by this component, which will then be aborted automatically if the component is removed from the DOM.

Returns AbortSignal
- Defined in src/component.ts:223

addController

addController(controller: ReactiveController): void
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
Returns void
Implementation of ReactiveControllerHost.addController
- Defined in src/component.ts:425

addStyleSheet

addStyleSheet(spec: CSSStyleSpecDeclaration): void
Add a style sheet to the component's shadow root.
Parameters
- spec: CSSStyleSpecDeclaration
Returns void
- Defined in src/component.ts:466

`Protected`createRenderRoot

createRenderRoot(): HTMLElement | ShadowRoot
Create the component's render root.

By default, this creates a ShadowRoot and attaches it to the component.

If you don't want to use a shadow DOM, you can override this method to just return this, which causes the component's contents to render as direct children of the component itself.

Returns HTMLElement | ShadowRoot
- Defined in src/component.ts:452

removeController

removeController(controller: ReactiveController): void
Removes a controller from the host.
Parameters
- controller: ReactiveController
Returns void
Implementation of ReactiveControllerHost.removeController
- Defined in src/component.ts:436

`Static`addInitialiser

addInitialiser(init: (this: Component) => void): void
Register a function which will be executed whenever an instance of this class is constructed.
Parameters
- init: (this: Component) => void
Returns void
- Defined in src/component.ts:234

Declarations

emits

emits: object

Declares the events this element can emit.

`Static`deps

deps: Deps = []

Declare the web components this element will be using.

This is a convenient place to make sure these web components will be defined when your component is rendered. It has no effect otherwise.

Example

class MyComponent extends Component {
    static deps: Deps = [ MySubcomponent, MyOtherSubcomponent ];
}

`Static` `Optional`styles

styles?: CSSStyleSpecDeclaration

Declare CSS style sheets which will be installed for this web component.

Style sheets can be either CSSStyleSheet objects, Lit template CSSResults, or strings.

If a superclass also declares the styles property, this list will be appended to the superclass's list.

Example

class MyComponent extends Component {
    static styles = css`
        :host {
            border: 2px solid red;
        }
    `;
}

Events

emit

emit<M extends CustomEventTypes<never>, K extends string, D>(
    name: K,
    detail?: D,
    options?: EventInit,
): CustomEvent<D>
Emit a custom event with the given name and detail.

Event init options default to { bubbles: true, composed: true }.
Type Parameters
- M extends CustomEventTypes<never>
- K extends string
- D
Parameters
- name: K
- Optionaldetail: D
- Optionaloptions: EventInit
Returns CustomEvent<D>
Inherited from EmitterElement.emit
- Defined in src/emitter.ts:84

emitEvent

emitEvent<
    K extends never,
    E extends never,
    C extends new (type: string, ...args: Args) => E,
    Args extends any[],
>(
    name: K,
    constructor: C,
    ...args: Args,
): E
Construct an event using the provided name and constructor.

The constructor will be called with the name as its first argument, followed by any subsequent arguments provided after the constructor.
Type Parameters
- K extends never
- E extends never
- C extends new (type: string, ...args: Args) => E
- Args extends any[]
Parameters
- name: K
- constructor: C
- ...args: Args
Returns E
Example
```
this.emitEvent("click", MouseEvent, { button: 2 });
// emits: new MouseEvent("click", { button: 2 });
```
Inherited from EmitterElement.emitEvent
- Defined in src/emitter.ts:111

on

on<K extends keyof HTMLElementEventMap>(
    type: K,
    callback: (event: HTMLElementEventMap[K]) => void,
    options?: boolean | AddEventListenerOptions,
): Disposable
Attach an event listener to an event on this component.
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- type: K
- callback: (event: HTMLElementEventMap[K]) => void
- Optionaloptions: boolean | AddEventListenerOptions
Returns Disposable
A Disposable to subsequently detach the event listener.
- Defined in src/component.ts:794

Lifecycle

`Protected`connected

connected(): void
This lifecycle callback is called each time this component is connected to the DOM.

Returns void
- Defined in src/component.ts:626

`Protected`disconnected

disconnected(): void
This lifecycle callback is called each time this component is disconnected from the DOM.

Returns void
- Defined in src/component.ts:635

`Protected`firstInitialised

firstInitialised(): void
This lifecycle callback is called the first time every property decorated with @require has been defined, and before Component.initialised.

Returns void
- Defined in src/component.ts:683

`Protected`firstUpdated

firstUpdated(): void
This lifecycle callback is called after the component's first update has completed, and before Component.updated.

Returns void
- Defined in src/component.ts:652

`Protected`initialised

initialised(): void
This lifecycle callback is called every time a property decorated with the @require decorator has changed, but only when every property marked as such is not undefined.

Returns void
- Defined in src/component.ts:673

`Protected`stabilised

stabilised(): void
This lifecycle callback is called when the component considers itself stabilised after its first update.

Returns void
See
Component.hasStabilised
- Defined in src/component.ts:663

`Protected`updated

updated(): void
This lifecycle callback is called each time an update has completed.

Returns void
- Defined in src/component.ts:643

Queries

`Protected`findChildComponents

findChildComponents(root?: Element | ShadowRoot): IteratorObject<Component>
Return an iterator over this component's children which are also Components.
Parameters
- root: Element | ShadowRoot = ...
Returns IteratorObject<Component>
- Defined in src/component.ts:599

getFocusedElement

getFocusedElement(): Element | null
If an element that is either inside this element's shadow root or is a child of this element (ie. slotted) currently has focus, return that element. Otherwise, return null.

Returns Element | null
- Defined in src/component.ts:808

query

query<El extends keyof HTMLElementTagNameMap>(
selector: El,
): HTMLElementTagNameMap[El] | null
Find the first element in the component's Component.renderRoot matching the provided CSS selector.

If you need to query the component's direct child elements instead, use Component.querySlot.

If you were looking for Lit's @query decorator, use this as a getter instead, as in the example below.
Type Parameters
- El extends keyof HTMLElementTagNameMap
Parameters
- selector: El
Returns HTMLElementTagNameMap[El] | null
Example
```
class MyComponent extends Component {
    get button(): HTMLButtonElement {
        return this.query("button");
    }

    protected override render() {
        return html`<button>I am a button</button>`;
    }
}
```
- Defined in src/component.ts:834
query<El extends keyof SVGElementTagNameMap>(
selector: El,
): SVGElementTagNameMap[El] | null
Find the first element in the component's Component.renderRoot matching the provided CSS selector.

If you need to query the component's direct child elements instead, use Component.querySlot.

If you were looking for Lit's @query decorator, use this as a getter instead, as in the example below.
Type Parameters
- El extends keyof SVGElementTagNameMap
Parameters
- selector: El
Returns SVGElementTagNameMap[El] | null
Example
```
class MyComponent extends Component {
    get button(): HTMLButtonElement {
        return this.query("button");
    }

    protected override render() {
        return html`<button>I am a button</button>`;
    }
}
```
- Defined in src/component.ts:835
query<El extends keyof MathMLElementTagNameMap>(
selector: El,
): MathMLElementTagNameMap[El] | null
Find the first element in the component's Component.renderRoot matching the provided CSS selector.

If you need to query the component's direct child elements instead, use Component.querySlot.

If you were looking for Lit's @query decorator, use this as a getter instead, as in the example below.
Type Parameters
- El extends keyof MathMLElementTagNameMap
Parameters
- selector: El
Returns MathMLElementTagNameMap[El] | null
Example
```
class MyComponent extends Component {
    get button(): HTMLButtonElement {
        return this.query("button");
    }

    protected override render() {
        return html`<button>I am a button</button>`;
    }
}
```
- Defined in src/component.ts:836
query<El extends keyof HTMLElementDeprecatedTagNameMap>(
selector: El,
): HTMLElementDeprecatedTagNameMap[El] | null
Type Parameters
- El extends keyof HTMLElementDeprecatedTagNameMap
Parameters
- selector: El
Returns HTMLElementDeprecatedTagNameMap[El] | null
Deprecated
- Defined in src/component.ts:840
query(selector: string): Element | null
Find the first element in the component's Component.renderRoot matching the provided CSS selector.

If you need to query the component's direct child elements instead, use Component.querySlot.

If you were looking for Lit's @query decorator, use this as a getter instead, as in the example below.
Parameters
- selector: string
Returns Element | null
Example
```
class MyComponent extends Component {
    get button(): HTMLButtonElement {
        return this.query("button");
    }

    protected override render() {
        return html`<button>I am a button</button>`;
    }
}
```
- Defined in src/component.ts:843

queryAll

queryAll<El extends keyof HTMLElementTagNameMap>(
selector: El,
): NodeListOf<HTMLElementTagNameMap[El]>
Find all elements in the component's Component.renderRoot matching the provided CSS selector.

If you need to query the component's direct child elements instead, use Component.querySlot.

If you were looking for Lit's @queryAll decorator, use this as a getter instead, as in the example below.
Type Parameters
- El extends keyof HTMLElementTagNameMap
Parameters
- selector: El
Returns NodeListOf<HTMLElementTagNameMap[El]>
Example
```
class MyComponent extends Component {
    get buttons(): NodeListOf<HTMLButtonElement> {
        return this.queryAll("button");
    }

    protected override render() {
        return html`
            <button>I am a button</button>
            <button>I am also a button</button>
        `;
    }
}
```
- Defined in src/component.ts:873
queryAll<El extends keyof SVGElementTagNameMap>(
selector: El,
): NodeListOf<SVGElementTagNameMap[El]>
Find all elements in the component's Component.renderRoot matching the provided CSS selector.

If you need to query the component's direct child elements instead, use Component.querySlot.

If you were looking for Lit's @queryAll decorator, use this as a getter instead, as in the example below.
Type Parameters
- El extends keyof SVGElementTagNameMap
Parameters
- selector: El
Returns NodeListOf<SVGElementTagNameMap[El]>
Example
```
class MyComponent extends Component {
    get buttons(): NodeListOf<HTMLButtonElement> {
        return this.queryAll("button");
    }

    protected override render() {
        return html`
            <button>I am a button</button>
            <button>I am also a button</button>
        `;
    }
}
```
- Defined in src/component.ts:876
queryAll<El extends keyof MathMLElementTagNameMap>(
selector: El,
): NodeListOf<MathMLElementTagNameMap[El]>
Find all elements in the component's Component.renderRoot matching the provided CSS selector.

If you need to query the component's direct child elements instead, use Component.querySlot.

If you were looking for Lit's @queryAll decorator, use this as a getter instead, as in the example below.
Type Parameters
- El extends keyof MathMLElementTagNameMap
Parameters
- selector: El
Returns NodeListOf<MathMLElementTagNameMap[El]>
Example
```
class MyComponent extends Component {
    get buttons(): NodeListOf<HTMLButtonElement> {
        return this.queryAll("button");
    }

    protected override render() {
        return html`
            <button>I am a button</button>
            <button>I am also a button</button>
        `;
    }
}
```
- Defined in src/component.ts:879
queryAll<El extends keyof HTMLElementDeprecatedTagNameMap>(
selector: El,
): NodeListOf<HTMLElementDeprecatedTagNameMap[El]>
Type Parameters
- El extends keyof HTMLElementDeprecatedTagNameMap
Parameters
- selector: El
Returns NodeListOf<HTMLElementDeprecatedTagNameMap[El]>
Deprecated
- Defined in src/component.ts:883
queryAll(selector: string): NodeListOf<Element>
Find all elements in the component's Component.renderRoot matching the provided CSS selector.

If you need to query the component's direct child elements instead, use Component.querySlot.

If you were looking for Lit's @queryAll decorator, use this as a getter instead, as in the example below.
Parameters
- selector: string
Returns NodeListOf<Element>
Example
```
class MyComponent extends Component {
    get buttons(): NodeListOf<HTMLButtonElement> {
        return this.queryAll("button");
    }

    protected override render() {
        return html`
            <button>I am a button</button>
            <button>I am also a button</button>
        `;
    }
}
```
- Defined in src/component.ts:886

querySlot

querySlot(
options: QuerySlotOptions & { nodes: true; reactive: true },
): Computed<Node[]>
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Parameters
- options: QuerySlotOptions & { nodes: true; reactive: true }
Returns Computed<Node[]>
- Defined in src/component.ts:899
querySlot(options: QuerySlotOptions & { nodes: true }): Node[]
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Parameters
- options: QuerySlotOptions & { nodes: true }
Returns Node[]
- Defined in src/component.ts:902
querySlot<T>(
    options: QuerySlotOptions & {
        instanceOf: Constructor<T>;
        reactive: true;
    },
): Computed<T[]>
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Type Parameters
- T
Parameters
- options: QuerySlotOptions & { instanceOf: Constructor<T>; reactive: true }
Returns Computed<T[]>
- Defined in src/component.ts:903
querySlot(options: QuerySlotOptions & { reactive: true }): Computed<Element[]>
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Parameters
- options: QuerySlotOptions & { reactive: true }
Returns Computed<Element[]>
- Defined in src/component.ts:906
querySlot<T>(options: QuerySlotOptions & { instanceOf: Constructor<T> }): T[]
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Type Parameters
- T
Parameters
- options: QuerySlotOptions & { instanceOf: Constructor<T> }
Returns T[]
- Defined in src/component.ts:907
querySlot<El extends keyof HTMLElementTagNameMap>(
options: QuerySlotOptions & { reactive: true; selector: El },
): Computed<HTMLElementTagNameMap[El][]>
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Type Parameters
- El extends keyof HTMLElementTagNameMap
Parameters
- options: QuerySlotOptions & { reactive: true; selector: El }
Returns Computed<HTMLElementTagNameMap[El][]>
- Defined in src/component.ts:908
querySlot<El extends keyof HTMLElementTagNameMap>(
options: QuerySlotOptions & { selector: El },
): HTMLElementTagNameMap[El][]
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Type Parameters
- El extends keyof HTMLElementTagNameMap
Parameters
- options: QuerySlotOptions & { selector: El }
Returns HTMLElementTagNameMap[El][]
- Defined in src/component.ts:911
querySlot<El extends keyof SVGElementTagNameMap>(
options: QuerySlotOptions & { reactive: true; selector: El },
): Computed<SVGElementTagNameMap[El][]>
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Type Parameters
- El extends keyof SVGElementTagNameMap
Parameters
- options: QuerySlotOptions & { reactive: true; selector: El }
Returns Computed<SVGElementTagNameMap[El][]>
- Defined in src/component.ts:914
querySlot<El extends keyof SVGElementTagNameMap>(
options: QuerySlotOptions & { selector: El },
): SVGElementTagNameMap[El][]
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Type Parameters
- El extends keyof SVGElementTagNameMap
Parameters
- options: QuerySlotOptions & { selector: El }
Returns SVGElementTagNameMap[El][]
- Defined in src/component.ts:917
querySlot<El extends keyof MathMLElementTagNameMap>(
options: QuerySlotOptions & { reactive: true; selector: El },
): Computed<MathMLElementTagNameMap[El][]>
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Type Parameters
- El extends keyof MathMLElementTagNameMap
Parameters
- options: QuerySlotOptions & { reactive: true; selector: El }
Returns Computed<MathMLElementTagNameMap[El][]>
- Defined in src/component.ts:920
querySlot<El extends keyof MathMLElementTagNameMap>(
options: QuerySlotOptions & { selector: El },
): MathMLElementTagNameMap[El][]
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Type Parameters
- El extends keyof MathMLElementTagNameMap
Parameters
- options: QuerySlotOptions & { selector: El }
Returns MathMLElementTagNameMap[El][]
- Defined in src/component.ts:923
querySlot<El extends keyof HTMLElementDeprecatedTagNameMap>(
options: QuerySlotOptions & { reactive: true; selector: El },
): Computed<HTMLElementDeprecatedTagNameMap[El][]>
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Type Parameters
- El extends keyof HTMLElementDeprecatedTagNameMap
Parameters
- options: QuerySlotOptions & { reactive: true; selector: El }
Returns Computed<HTMLElementDeprecatedTagNameMap[El][]>
- Defined in src/component.ts:926
querySlot<El extends keyof HTMLElementDeprecatedTagNameMap>(
options: QuerySlotOptions & { selector: El },
): HTMLElementDeprecatedTagNameMap[El][]
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Type Parameters
- El extends keyof HTMLElementDeprecatedTagNameMap
Parameters
- options: QuerySlotOptions & { selector: El }
Returns HTMLElementDeprecatedTagNameMap[El][]
- Defined in src/component.ts:929
querySlot(options?: QuerySlotOptions): Element[]
Find the elements attached to a given slot on this component, according to the provided QuerySlotOptions.

If you include reactive: true in your query, the result will be a signal which updates with the contents of the slot.
Parameters
- Optionaloptions: QuerySlotOptions
Returns Element[]
- Defined in src/component.ts:932

Render

hasStabilised

get hasStabilised(): Promise<void>
A Promise which resolves when this component has completed its first update and considers itself stabilised, according to the Component.stabilise method.

By default, a component considers itself stabilised when all of its children which are also Components are reporting as stabilised.

Returns Promise<void>
- Defined in src/component.ts:209

isUpdatePending

get isUpdatePending(): boolean
True if this component had scheduled an update which has not yet started.

Returns boolean
- Defined in src/component.ts:188

updateComplete

get updateComplete(): Promise<boolean>
Returns Promise<boolean>
Implementation of ReactiveControllerHost.updateComplete
- Defined in src/component.ts:195

`Protected`render

render(): unknown

Render the component's contents.

This function should return a Lit renderable value, usually an html template.

Returns unknown

Example

class MyComponent extends Component {
    protected override render() {
        return html`
            <h1>Hello Joe!</h1>
        `;
    }
}

requestUpdate

requestUpdate(opts?: UpdateConfig): void
Ask this component to update itself.
Parameters
- Optionalopts: UpdateConfig
Returns void
Implementation of ReactiveControllerHost.requestUpdate
- Defined in src/component.ts:488

`Protected`stabilise

stabilise(): Promise<void>
Return a Promise which resolves when this component considers itself to have stabilised.

The default implementation waits for any children which are also Components to report that they have also stabilised.

Returns Promise<void>
- Defined in src/component.ts:614

Resources

use

use(disposifiable: undefined): undefined
Register a Disposable for automatic disposal when this component is disposed.
Parameters
- disposifiable: undefined
Returns undefined
- Defined in src/component.ts:726
use(disposifiable: null): null
Register a Disposable for automatic disposal when this component is disposed.
Parameters
- disposifiable: null
Returns null
- Defined in src/component.ts:727
use(disposifiable: Disposifiable): Disposable
Register a Disposable for automatic disposal when this component is disposed.
Parameters
- disposifiable: Disposifiable
Returns Disposable
- Defined in src/component.ts:728
use(disposifiable: Disposifiable | undefined): Disposable | undefined
Register a Disposable for automatic disposal when this component is disposed.
Parameters
- disposifiable: Disposifiable | undefined
Returns Disposable | undefined
- Defined in src/component.ts:729
use(
disposifiable: Disposifiable | null | undefined,
): Disposable | null | undefined
Register a Disposable for automatic disposal when this component is disposed.
Parameters
- disposifiable: Disposifiable | null | undefined
Returns Disposable | null | undefined
- Defined in src/component.ts:730

useWhileConnected

useWhileConnected(
    disposifiable: Disposifiable,
    secondDisposable: Disposifiable,
    ...disposifiables: Disposifiable[],
): Disposable[]
Attach a Disposable to the component's connected/disconnected lifecycle state.

This causes the Disposable to be disposed automatically when the component is disconnected. The common pattern for this is for resources, such as event listeners, allocated in Component.connectedCallback to be registered for automatic deallocation during Component.disconnectedCallback.
Parameters
- disposifiable: Disposifiable
- secondDisposable: Disposifiable
- ...disposifiables: Disposifiable[]
Returns Disposable[]
Example
```
protected override connectedCallback() {
    super.connectedCallback();
    this.useWhileConnected(this.on("click", this.handleClick.bind(this)));
}
```
- Defined in src/component.ts:757
useWhileConnected(disposifiable: undefined): undefined
Attach a Disposable to the component's connected/disconnected lifecycle state.

This causes the Disposable to be disposed automatically when the component is disconnected. The common pattern for this is for resources, such as event listeners, allocated in Component.connectedCallback to be registered for automatic deallocation during Component.disconnectedCallback.
Parameters
- disposifiable: undefined
Returns undefined
Example
```
protected override connectedCallback() {
    super.connectedCallback();
    this.useWhileConnected(this.on("click", this.handleClick.bind(this)));
}
```
- Defined in src/component.ts:762
useWhileConnected(disposifiable: null): null
Attach a Disposable to the component's connected/disconnected lifecycle state.

This causes the Disposable to be disposed automatically when the component is disconnected. The common pattern for this is for resources, such as event listeners, allocated in Component.connectedCallback to be registered for automatic deallocation during Component.disconnectedCallback.
Parameters
- disposifiable: null
Returns null
Example
```
protected override connectedCallback() {
    super.connectedCallback();
    this.useWhileConnected(this.on("click", this.handleClick.bind(this)));
}
```
- Defined in src/component.ts:763
useWhileConnected(disposifiable: Disposifiable): Disposable
Attach a Disposable to the component's connected/disconnected lifecycle state.

This causes the Disposable to be disposed automatically when the component is disconnected. The common pattern for this is for resources, such as event listeners, allocated in Component.connectedCallback to be registered for automatic deallocation during Component.disconnectedCallback.
Parameters
- disposifiable: Disposifiable
Returns Disposable
Example
```
protected override connectedCallback() {
    super.connectedCallback();
    this.useWhileConnected(this.on("click", this.handleClick.bind(this)));
}
```
- Defined in src/component.ts:764
useWhileConnected(
disposifiable: Disposifiable | undefined,
): Disposable | undefined
Attach a Disposable to the component's connected/disconnected lifecycle state.

This causes the Disposable to be disposed automatically when the component is disconnected. The common pattern for this is for resources, such as event listeners, allocated in Component.connectedCallback to be registered for automatic deallocation during Component.disconnectedCallback.
Parameters
- disposifiable: Disposifiable | undefined
Returns Disposable | undefined
Example
```
protected override connectedCallback() {
    super.connectedCallback();
    this.useWhileConnected(this.on("click", this.handleClick.bind(this)));
}
```
- Defined in src/component.ts:765
useWhileConnected(
disposifiable: Disposifiable | null | undefined,
): Disposable | null | undefined
Attach a Disposable to the component's connected/disconnected lifecycle state.

This causes the Disposable to be disposed automatically when the component is disconnected. The common pattern for this is for resources, such as event listeners, allocated in Component.connectedCallback to be registered for automatic deallocation during Component.disconnectedCallback.
Parameters
- disposifiable: Disposifiable | null | undefined
Returns Disposable | null | undefined
Example
```
protected override connectedCallback() {
    super.connectedCallback();
    this.useWhileConnected(this.on("click", this.handleClick.bind(this)));
}
```
- Defined in src/component.ts:766

Class ComponentAbstract

Hierarchy (View Summary)

Implements

Advanced

renderOptions

ReadonlyrenderRoot

StaticshadowRootOptions

abortSignal

Returns AbortSignal

addController

Parameters

Returns void

addStyleSheet

Parameters

Returns void

ProtectedcreateRenderRoot

Returns HTMLElement | ShadowRoot

removeController

Parameters

Returns void

StaticaddInitialiser

Parameters

Returns void

Declarations

emits

Staticdeps

Example

Static Optionalstyles

Example

Events

emit

Type Parameters

Parameters

Returns CustomEvent<D>

emitEvent

Type Parameters

Parameters

Returns E

Example

on

Type Parameters

Parameters

Returns Disposable

Lifecycle

Protectedconnected

Returns void

Protecteddisconnected

Returns void

ProtectedfirstInitialised

Returns void

ProtectedfirstUpdated

Returns void

Protectedinitialised

Returns void

Protectedstabilised

Returns void

See

Protectedupdated

Returns void

Queries

ProtectedfindChildComponents

Parameters

Returns IteratorObject<Component>

getFocusedElement

Returns Element | null

query

Type Parameters

Parameters

Returns HTMLElementTagNameMap[El] | null

Example

Type Parameters

Parameters

Returns SVGElementTagNameMap[El] | null

Example

Type Parameters

Parameters

Returns MathMLElementTagNameMap[El] | null

Example

Type Parameters

Parameters

Class Component`Abstract`

`Readonly`renderRoot

`Static`shadowRootOptions

`Protected`createRenderRoot

`Static`addInitialiser

`Static`deps

`Static` `Optional`styles

`Protected`connected

`Protected`disconnected

`Protected`firstInitialised

`Protected`firstUpdated

`Protected`initialised

`Protected`stabilised

`Protected`updated

`Protected`findChildComponents