@gluonjs/core / src / GluonElementRegistry

Interface: GluonElementRegistry

Properties

platformRegistry?

readonly optional platformRegistry?: CustomElementRegistry

The platform registry used in this runtime. It is scoped when scoped is true.

requestedScoped

readonly requestedScoped: boolean

True when this handle was requested as an isolated registry, including during SSR.

scoped

readonly scoped: boolean

True only when the runtime can associate an independent registry with a ShadowRoot.

Methods

define()

define(name, constructor): void

Parameters

name

`${string}-${string}`

constructor

CustomElementConstructor

Returns

void

get()

get(name): CustomElementConstructor | undefined

Parameters

name

string

Returns

CustomElementConstructor | undefined

whenDefined()

whenDefined(name): Promise<CustomElementConstructor>

Parameters

name

string

Returns

Promise<CustomElementConstructor>

Example

Own definitions across native scoped browsers, global fallback browsers, and isolated server rendering:

import {
  GluonElement,
  createGluonElementRegistry,
  createRegistryShadowRoot,
  defineElement,
  defineGluonElement,
  html,
  initializeRegistryShadowRoot,
  supportsScopedCustomElementRegistries,
  type CreateGluonElementRegistryOptions,
  type DefineElementOptions,
  type DefineGluonElementOptions,
  type GluonElementDefinitionRegistry,
  type GluonElementRegistry,
  type GluonElementServerRenderOptions,
} from '@gluonjs/core';

const config: CreateGluonElementRegistryOptions = { fallback: 'global' };
const registry: GluonElementRegistry = createGluonElementRegistry(config);
const target: GluonElementDefinitionRegistry = registry;
class ProductStatus extends GluonElement {
  static override readonly shadowRootRegistry = registry;
  protected override render() { return html`<p>Ready</p>`; }
}
const definition: DefineElementOptions = { registry: target };
const serverOptions: GluonElementServerRenderOptions = { registry: target };
defineElement('shop-product-status', ProductStatus, definition);
const functionalOptions: DefineGluonElementOptions = { registry };
defineGluonElement({
  tagName: 'shop-functional-status',
  setup: () => ({ render: () => html`<p>Functional ready</p>` }),
}, functionalOptions);
const host = document.createElement('section');
const root = createRegistryShadowRoot(host, registry);
initializeRegistryShadowRoot(root, registry);
console.log(supportsScopedCustomElementRegistries(), registry.scoped, serverOptions);