A host component is the component instance passed through DOM mounting and patching so nested nodes retain their component context. A root component uses null; nested components use the instance and its offset to resolve fragment-relative DOM positions. section 9.3.4 section 10.3
The reference travels through several responsibilities:
- Component mount() passes this to mountDOM(), which forwards it through element and fragment creation. section 10.3
- Event setup receives the instance through addProps(), allowing event listeners to retain the host component. section 10.3
- DOM patching forwards the instance to replacement, element, child, and event-patching operations. section 10.4
- Child diffing adds the component offset to add and move indices; remove and noop operations do not reference DOM indices. section 9.3.4
Passing context during a patch
A patchDOM(oldVdom, newVdom, parentEl, hostComponent = null) call passes hostComponent to patchChildren(). Child operations then use hostComponent?.offset ?? 0, while mountDOM() receives the same instance when inserting a node.
Listing 10.8 Passing the host component (patch-dom.js)
export function patchDOM(
oldVdom,
newVdom,
parentEl,
hostComponent = null
) {
if (!areNodesEqual(oldVdom, newVdom)) {
const index = findIndexInParent(parentEl, oldVdom.el)
destroyDOM(oldVdom)
mountDOM(newVdom, parentEl, index, hostComponent) #1
return newVdom
}
newVdom.el = oldVdom.el
switch (newVdom.type) {
case DOM_TYPES.TEXT: {
patchText(oldVdom, newVdom)
return newVdom
}
case DOM_TYPES.ELEMENT: {
patchElement(oldVdom, newVdom, hostComponent) #2
break
}
}
patchChildren(oldVdom, newVdom, hostComponent)
return newVdom
}
Trace host-component propagation through DOM replacement, element patching, and child patching. section 10.4
