@gluonjs/core / src / GluonElementClass

Type Alias: GluonElementClass()<ElementType>

GluonElementClass<ElementType> = ElementType

Type Parameters

ElementType

ElementType extends GluonElement<any> = GluonElement<any>

new GluonElementClass(): ElementType

Returns

ElementType

Properties

events?

readonly optional events?: Readonly<Record<string, EventDeclaration<any>>>

properties?

readonly optional properties?: Readonly<Record<string, PropertyDefinition<any>>>

prototype

readonly prototype: ElementType

shadowRootRegistry?

readonly optional shadowRootRegistry?: GluonElementRegistry

slots?

readonly optional slots?: SlotDeclarations

styles?

readonly optional styles?: CSSStyleSheet | readonly CSSStyleSheet[]

Example

Type and register a constructible Gluon Custom Element class through the public Core entry point:

import {
  GluonElement,
  defineElement,
  html,
  type GluonElementClass,
} from '@gluonjs/core';

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

const ProductCardElement: GluonElementClass<ProductCard> = ProductCard;
defineElement('product-card', ProductCardElement);