@generative-dom/plugin-custom-elements

Built-in Web Components (ce-clock, ce-plot, ce-counter) for Generative DOM.

Installation

pnpm add @generative-dom/plugin-custom-elements

Usage

import { GenerativeDom } from '@generative-dom/core';
import { customElements } from '@generative-dom/plugin-custom-elements';

const md = new GenerativeDom(container, { plugins: [customElements()] });
md.push('<ce-clock />\n');
md.push('<ce-plot width="300" height="120">10,40,25,60,80</ce-plot>\n');
md.push('<ce-counter start="5" min="0" max="10" />\n');

Matching

Matches self-closing (<tag ... />) or content-bearing (<tag ...>content</tag>) elements whose tag name is in the configured allow-list. Unknown tags are ignored.

Default allowed tags: ce-clock, ce-plot, ce-counter.

Pass allowedTags to extend or replace the list:

customElements({ allowedTags: ['ce-clock', 'my-widget'] })

Configuration

• priority: 50
• level: block (default)
• matchDescriptor: { startChars: '<' }
• options: allowedTags?: string[]

on* attributes and style values containing url() or expression() are stripped before rendering for security.

Rendered Output

| Element | Behaviour | |---------|-----------| | <ce-clock /> | Ticking clock updated every second | | <ce-plot ...>values</ce-plot> | SVG bar chart; accepts width, height, color attributes and comma-separated numbers as content | | <ce-counter start="N" min="N" max="N" /> | Increment/decrement counter with +/- buttons |

Components self-register via the Custom Elements API on init(). In non-browser environments (no customElements global) registration is skipped gracefully.