Sometimes a component needs to return several children without adding a wrapper element to the page. A fragment groups those children in the virtual DOM. It is a container for virtual nodes, not an extra element in the rendered DOM. section 3.7 section 3.9
A small implementation gives fragments their own node type alongside text and element nodes. The hFragment() helper stores an array of children, removes null entries, and converts strings to text virtual nodes. section 3.4 section 3.7.1
export function hFragment(vNodes) {
return {
type: DOM_TYPES.FRAGMENT,
children: mapTextNodes(withoutNulls(vNodes)),
}
}
Notice that the returned object has children but no HTML tag name: the fragment groups nodes without describing a wrapper element. section 3.7.1
A component with several top-level children
A to-do application's App() function can return a fragment containing a heading, a form component, and a list component. They remain separate children rather than being placed inside an otherwise unnecessary wrapper. section 3.8.3
Mounting a fragment means mounting each child into the same parent element. The fragment's el reference points to that parent; nested fragments share the reference. For placement at a particular position, each child needs its own successive insertion index. section 4.1.3 section 8.1.4
Before reconciliation compares children, fragment children are extracted into the surrounding children array. This keeps the comparison close to the real DOM, where no fragment node appears. A browser DocumentFragment is a separate Document API facility; this implementation does not use one to insert virtual fragments. section 8.2.1 section 3.7
