Appearance
UIElementTagRegistry
Registry for mapping custom UI element tags to their implementations.
typescript
class UIElementTagRegistry
Description
UIElementTagRegistry
provides a mechanism to register custom HTML tags that will be replaced with your UI elements when controls are rendered. This allows you to use simple, declarative tags in your control templates that automatically get replaced with complex UI elements at runtime.
For example, you can define a tag like <brand-color-picker>
in your control templates, and the registry will ensure it gets replaced with your custom color picker UI element when the control is rendered.
Import
typescript
import { UIElementTagRegistry } from '@stripoinc/ui-editor-extensions';
Methods
registerUiElements()
Registers mappings between custom HTML tags and UI element IDs.
typescript
public registerUiElements(uiElementsTagsMap: Record<string, string>): void
Parameters
Name | Type | Description |
---|---|---|
uiElementsTagsMap | Record<string, string> | Map of tag names to UI element IDs |
Usage Notes
- Tag names should be valid HTML custom element names (lowercase with hyphens)
- UI element IDs must match those returned by
UIElement.getId()
- The map is provided by the editor based on available UI elements
- Register only the tags you want to use in your templates