Element Mirroring (Copy-From)

In complex interfaces, you sometimes need an element to reflect the exact state of another StringTune object, even if they share no parent-child relationship in the DOM.

StringTune provides the string-copy-from attribute to establish a direct mirroring link between two objects.

How It Works

1. Source Element: Define a standard StringTune object with a string-id.
2. Mirror Element: Use string-copy-from="[source-id]" on the element that should receive the updates.

<!-- Source Element -->
<section string="progress" string-id="main-hero" string-offset-top="10%" string-offset-bottom="-10%">
  <!-- content -->
</section>

<!-- Mirror Element (e.g., in a fixed header) -->
<div string-copy-from="main-hero" class="hero-indicator">
  <!-- This dot/bar will update based on the main-hero's progress -->
</div>

Supported Behavior

When you link elements this way:

• The target element will receive the same CSS variables (like --progress) and reactivity states computed for the source element.
• It bypasses its own geometric intersection tracking and strictly follows the lifecycle and calculation loop of the copied target.

Use Cases

• Navigation Highlights: A sidebar navigation item reading the string="inview" status or string="progress" value of the sections it links to.
• Floating Widgets: A fixed progress bar filling up as the user scrolls through a specific article container somewhere else on the page.