@gluonjs/core / src/decorators / customElement

Function: customElement()

customElement(tagName): CustomElementDecorator

Registers the decorated GluonElement subclass with the Custom Elements registry. This is the decorator equivalent of defineElement(tagName, Constructor).

Parameters

tagName

`${string}-${string}`

Returns

CustomElementDecorator

Example

import { GluonElement, html } from '@gluonjs/core';
import {
  customElement,
  property,
  state,
  type CustomElementDecorator,
  type GluonPropertyDecorator,
  type StateDeclaration,
} from '@gluonjs/core/decorators';

const register: CustomElementDecorator = customElement('decorated-counter');
const reflected: GluonPropertyDecorator = property({ type: Number, reflect: true, default: 0 });
const internal = { default: false } satisfies StateDeclaration<boolean>;

@register
class DecoratedCounter extends GluonElement {
  @reflected count!: number;
  @state(internal) private busy!: boolean;
  protected render() { return html`<button ?disabled=${this.busy}>${this.count}</button>`; }
}