@gluonjs/core / src / initializeRegistryShadowRoot

Function: initializeRegistryShadowRoot()

initializeRegistryShadowRoot(root, registry): void

Initializes a declarative ShadowRoot emitted for a scoped-registry component during hydration.

Parameters

root

ShadowRoot

registry

GluonElementRegistry

Returns

void

Example

Associate a selected registry with an existing declarative ShadowRoot before hydration upgrades its internal elements:

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