Back to Components

ElementManager Demo

ElementManager is a utility component for automatic element discovery and management. It supports both single selector mode (backwards compatible) and multiple selector groups for organizing different types of elements. Perfect for building handler components like TooltipHandler, ModalManager, etc.

📊 Live Status

Total discovered: 0
Dynamic added: 9
By group: test: 0 | buttons: 0 | inputs: 0 | spans: 0
Hovering: none

HTML Elements

These are static HTML elements with data-test attributes.

Static Span Element

Dynamic Elements

These buttons are created dynamically via JavaScript. ElementManager automatically discovers them and adds event listeners via the elements Map. Click any dynamic button to see its individual click count update!

Components

These are actual Svelte UI components with data-test attributes, demonstrating ElementManager's ability to discover elements within components.

Button Components

Input Components

Multiple Selector Groups

ElementManager now supports multiple selector groups in a single instance. This demo shows element discovery by type using the new selectors prop.

Elements by Type

0
Buttons
0
Inputs
0
Spans

Static Elements by Type

Buttons with data-type="button"

Inputs with data-type="input"

Spans with data-type="span"

Multi Span 1 Multi Span 2

Dynamic Multi-Group Elements

Multiple Selector Groups Implementation

<ElementManager 
  selectors={{
    buttons: '[data-type="button"]',
    inputs: '[data-type="input"]', 
    spans: '[data-type="span"]'
  }}
  bind:elements={elementGroups}
  onElementAdded={(el, data, group) => {
    // Handle element addition for this group
  }}
>
  <!-- Each group can be handled differently -->
  <!-- ButtonHandler elements={elementGroups.buttons} />
  <!-- InputHandler elements={elementGroups.inputs} />
  <!-- SpanHandler elements={elementGroups.spans} -->
</ElementManager>

Development Warnings Demo

Open browser dev tools to see console warnings for these ElementManager instances:

Empty Selector Warning

This ElementManager uses an empty selector, which should trigger a warning in DEV mode.

selector=""
Elements discovered: 0

Broad Selector Warning

This ElementManager uses a broad selector that may impact performance.

selector="div"
Elements discovered: 0 (all div elements on page)

Usage Examples

Single Selector Group

<ElementManager 
  selectors={{ 
    tooltips: "[data-tooltip]" 
  }}
  bind:elements={elementGroups} 
/>
<TooltipHandler elements={elementGroups.tooltips} />

Multiple Selector Groups

<ElementManager 
  selectors={{
    buttons: "button[data-action]",
    inputs: "input[data-validate]",
    forms: "form[data-submit]"
  }}
  bind:elements={elementGroups}
  onElementAdded={(el, data, group) => {
    // Set up group-specific handling
    data.groupType = group;
  }}
>
  <!-- Each group can be processed differently -->
</ElementManager>

With Event Callbacks

<ElementManager 
  selectors={{
    interactive: "[data-interactive]"
  }}
  bind:elements={elementGroups}
  onElementAdded={(el, data, group) => {
    data.clickHandler = () => {
      // Handle element click
    };
    el.addEventListener('click', data.clickHandler);
  }}
  onElementRemoved={(el, data, group) => {
    if (data.clickHandler) {
      el.removeEventListener('click', data.clickHandler);
    }
  }}
/>

Custom Observer Options

<ElementManager 
  selectors={{
    editable: "[contenteditable]"
  }}
  observerOptions={{
    childList: true,
    characterData: true,
    subtree: true,
    attributeFilter: ['contenteditable']
  }}
  bind:elements={elementGroups}
/>