Nested UI becomes a DOM tree.
A children array lets a parent specification contain more specifications. Each child
uses the same build model.
div.card
├─ h3 → "Invoice"
├─ p → "2 items"
└─ button → "Open"
Specification
{
"tagName":"div",
"classList":["card"],
"children":[
{"tagName":"h3","textContent":"Invoice"},
{"tagName":"p","textContent":"2 items"},
{"tagName":"button","textContent":"Open"}
]
}
Three operations
Parent
Create the parent element.
Children
Build each child specification.
Connect
Append the resulting nodes.
Source connection
if ("children" in localSpec) {
localChildrenNodes = Array.isArray(localSpec.children) &&
localSpec.children.length > 0
? buildChildrenNodes({inChildren: localSpec.children})
: [];
elementBuilt.append(...localChildrenNodes);
}
A child does not need a second renderer. It is another specification in the same tree.