Fragments: Phantom Containers

Neo.container.Fragment represents a significant architectural evolution in how we structure Web Applications. Unlike traditional containers that render a wrapping <div>, or compile-time fragments that disappear entirely, Neo.mjs Fragments are runtime-manipulatable DOM ranges.

The "Phantom Node" Architecture

In the VDOM and DOM, a Fragment appears as a range of sibling nodes anchored by comments.

<!-- fragment-id-start -->
<div class="child-1"></div>
<div class="child-2"></div>
<!-- fragment-id-end -->

This architecture enables capabilities that are often impossible in single-threaded frameworks:

1. Transparent Layouts: Children sit directly in the parent's layout context. This is critical for CSS Grid and Flexbox, where an intermediate wrapper <div> would break the layout algorithm.
2. Smart Runtime / Lean IPC: When you move a Fragment (e.g., reordering it in a list), the Worker does not serialize N child operations. It sends a single high-level delta: {action: 'moveNode', id: 'fragment-id'}. The Main Thread resolves this by locating the anchors and moving the entire physical range atomically.
3. Conservation of Identity (Atomic Moves): Moving items in or out of a Fragment preserves their DOM state (focus, selection, input values, iframe content). The nodes are physically moved in the DOM, not destroyed and recreated.

Live Example: The "Impossible" Move

In many frameworks, moving a component into a different logical parent (like a Fragment) forces a teardown and re-render, losing the user's input state.

In this example, try typing in "Field 1", then click "Move Field 1 into Fragment". Notice that the input value and focus are preserved. The DOM node was physically transferred into the Fragment's range without a reset.

Cross-Window Capabilities

Because Neo.mjs uses a SharedWorker architecture, this "Identity Conservation" extends to Cross-Window Drag & Drop. You can move a Fragment (and all its children) from one browser window to another. The framework handles the DOM node transfer (or recreation with state hydration) seamlessly, making multi-monitor workflows trivial to implement.