@gluonjs/core / src / createGluonElementRegistry

Function: createGluonElementRegistry()

createGluonElementRegistry(options?): GluonElementRegistry

Creates one explicit Custom Element ownership boundary.

Browsers with native scoped registries receive an independent platform registry. Other browsers use the global registry by default, while SSR keeps an isolated definition table so rendering never depends on browser globals.

Parameters

options?

CreateGluonElementRegistryOptions = {}

Returns

GluonElementRegistry

Example

Create one universal Custom Element definition boundary with native ShadowRoot isolation, global browser fallback, and an SSR table:

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