@gluonjs/core / src/compat/lit / LitCompatElement

Abstract Class: LitCompatElement<Events>

Optional Lit lifecycle naming for components being migrated to Gluon.

The renderer, scheduler, connection scope, and error routing remain owned by GluonElement. New components should prefer Gluon's native lifecycle hooks.

Extends

• GluonElement<Events>

Type Parameters

Events

Events extends object = Record<string, unknown>

Constructors

Constructor

new LitCompatElement<Events>(): LitCompatElement<Events>

Returns

LitCompatElement<Events>

Overrides

GluonElement.constructor

Properties

renderRoot

protected readonly renderRoot: ShadowRoot

Shadow root rendered by update; override createRenderRoot to customize it.

Inherited from

GluonElement.renderRoot

---

events

readonly static events: Readonly<Record<string, EventDeclaration<any>>> = {}

Declares native output events and their propagation, cancellation, and validation rules.

Inherited from

GluonElement.events

---

properties

readonly static properties: Readonly<Record<string, PropertyDefinition<any>>> = {}

Declares reactive inputs and their attribute conversion, reflection, and validation rules.

Inherited from

GluonElement.properties

---

shadowRootRegistry?

readonly static optional shadowRootRegistry?: GluonElementRegistry

Optional explicit registry associated with this element's ShadowRoot.

Inherited from

GluonElement.shadowRootRegistry

---

slots

readonly static slots: SlotDeclarations = {}

Declares required named/default slots and whether the template supplies fallback content.

Inherited from

GluonElement.slots

---

styles

readonly static styles: CSSStyleSheet | readonly CSSStyleSheet[] = []

Lists constructable stylesheets adopted into each instance's render root.

Inherited from

GluonElement.styles

Accessors

changedProperties

Get Signature

get protected changedProperties(): ReadonlyMap<PropertyKey, unknown>

Returns the old values collected for the current update pass.

This is primarily a protected integration point for compatibility layers; native Gluon components should continue to use the lifecycle callbacks and reactive state directly.

Returns

ReadonlyMap<PropertyKey, unknown>

Inherited from

GluonElement.changedProperties

---

updateComplete

Get Signature

get updateComplete(): Promise<void>

Resolves after the currently scheduled render and its update hooks finish.

Returns

Promise<void>

Inherited from

GluonElement.updateComplete

---

observedAttributes

Get Signature

get static observedAttributes(): string[]

Attribute names derived from properties; managed by Gluon for the Custom Elements platform.

Returns

string[]

Inherited from

GluonElement.observedAttributes

Methods

attributeChangedCallback()

attributeChangedCallback(name, oldValue, value): void

Converts a changed declared attribute and writes the corresponding property.

Parameters

name

string

oldValue

string | null

value

string | null

Returns

void

Inherited from

GluonElement.attributeChangedCallback

---

beginHydration()

beginHydration(): void

Defers the first connection render while official hydration binds declarative Shadow DOM.

Returns

void

Inherited from

GluonElement.beginHydration

---

connectedCallback()

connectedCallback(): void

Lit-compatible platform lifecycle entry point; always call super.

Returns

void

Overrides

GluonElement.connectedCallback

---

createRenderRoot()

protected createRenderRoot(): ShadowRoot

Creates the component render root. Override only when the default open ShadowRoot is unsuitable.

Returns

ShadowRoot

Inherited from

GluonElement.createRenderRoot

---

disconnectedCallback()

disconnectedCallback(): void

Lit-compatible platform lifecycle entry point; always call super.

Returns

void

Overrides

GluonElement.disconnectedCallback

---

emit()

protected emit<Name>(type, detail, init?): boolean

Dispatches a typed native CustomEvent using the matching static event declaration.

Events bubble and cross the Shadow DOM boundary by default. The return value is false only when a cancelable event was canceled by a listener.

Type Parameters

Name

Name extends string

Parameters

type

Name

detail

Events[Name]

init?

Omit<CustomEventInit<Events[Name]>, "detail"> = {}

Returns

boolean

Inherited from

GluonElement.emit

---

endHydration()

endHydration(): void

Resumes connection rendering after official hydration installs the hydrated root.

Returns

void

Inherited from

GluonElement.endHydration

---

expose()

protected expose<Public>(value): Readonly<Public>

Publishes a frozen, deliberately small public object for use with exposedRef().

Type Parameters

Public

Public extends object

Parameters

value

Public

Returns

Readonly<Public>

Inherited from

GluonElement.expose

---

firstUpdated()

protected firstUpdated(_changedProperties): void

Runs once after the first successful render of each connection.

Parameters

_changedProperties

LitChangedProperties

Returns

void

---

onBeforeUpdate()

protected onBeforeUpdate(callback): void

Runs a callback before every update after the first render.

Parameters

callback

ComponentLifecycleCallback

Returns

void

Inherited from

GluonElement.onBeforeUpdate

---

onConnected()

protected onConnected(callback): void

Runs a callback once after the first render of each connection.

Parameters

callback

ComponentLifecycleCallback

Returns

void

Inherited from

GluonElement.onConnected

---

onDisconnected()

protected onDisconnected(callback): void

Runs a callback during disconnection after scoped reactive cleanup and render suspension.

Parameters

callback

ComponentLifecycleCallback

Returns

void

Inherited from

GluonElement.onDisconnected

---

onErrorCaptured()

protected onErrorCaptured(callback): void

Captures descendant component errors; return true to stop propagation to outer boundaries.

Parameters

callback

ComponentErrorBoundary

Returns

void

Inherited from

GluonElement.onErrorCaptured

---

onUpdated()

protected onUpdated(callback): void

Runs a callback after every successful render, including the first render.

Parameters

callback

ComponentLifecycleCallback

Returns

void

Inherited from

GluonElement.onUpdated

---

render()

abstract protected render(): TemplateResult

Returns the template for the current component state.

Returns

TemplateResult

Inherited from

GluonElement.render

---

renderForServer()

renderForServer(): TemplateResult

Returns the component template without browser connection lifecycle for official server rendering.

Returns

TemplateResult

Inherited from

GluonElement.renderForServer

---

requestHotUpdate()

requestHotUpdate(): Promise<void>

Requests a render pass after the official Vite runtime patches compatible logic. Application code should use normal reactive or property updates.

Returns

Promise<void>

Inherited from

GluonElement.requestHotUpdate

---

requestUpdate()

requestUpdate(_name?, _oldValue?): Promise<void>

Requests a Gluon update. The optional Lit arguments are accepted for migration ergonomics; Gluon collects actual declared-property changes.

Parameters

_name?

PropertyKey

_oldValue?

unknown

Returns

Promise<void>

Overrides

GluonElement.requestUpdate

---

setupConnection()

protected setupConnection(): void

Initializes work once per connection inside the connection's reactive effect scope.

Returns

void

Inherited from

GluonElement.setupConnection

---

teardownConnection()

protected teardownConnection(): void

Releases connection-local references after scoped cleanup and disconnect hooks.

Returns

void

Inherited from

GluonElement.teardownConnection

---

update()

protected update(): void

Commits the value returned by render into renderRoot.

Returns

void

Overrides

GluonElement.update

---

updated()

protected updated(_changedProperties): void

Runs after every successful Gluon render.

Parameters

_changedProperties

LitChangedProperties

Returns

void

---

willUpdate()

protected willUpdate(_changedProperties): void

Runs before each Gluon render, including the first render of a connection.

Parameters

_changedProperties

LitChangedProperties

Returns

void

Example

Extend the opt-in lifecycle bridge while leaving rendering and scheduling with Gluon:

import { LitCompatElement } from '@gluonjs/core/compat/lit';
import { html } from '@gluonjs/core';

class ProductCard extends LitCompatElement {
  protected override render() {
    return html`<article>Product</article>`;
  }
}

console.log(ProductCard);