@gluonjs/core / src / DefineElementOptions

Interface: DefineElementOptions

Properties

registry?

readonly optional registry?: GluonElementDefinitionRegistry

Registration target; omitting it preserves the global browser registry and server default.

Example

Select an explicit definition registry for one class-authored Gluon Custom Element:

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);