The element is assembled in stages.
The v4 element builder separates creation from text, properties, attributes, classes and children.
0 Create→1
Text→2 Properties→3 Attributes→4 Classes→5 Children
| Stage | Input | Purpose |
|---|---|---|
| 0 | tagName |
Create native element. |
| 1 | textContent |
Set visible text. |
| 2 | properties |
Apply DOM state. |
| 3 | attributes |
Apply HTML attributes. |
| 4 | classList |
Apply CSS classes. |
| 5 | children |
Accept child nodes. |
Source shape
const element = createElement({inTagName: localSpec.tagName});
applyTextContent({inElement: element, inTextContent: localSpec.textContent});
applyProperties({inElement: element, inProperties: localSpec.properties});
applyAttributes({inElement: element, inAttributes: localSpec.attributes});
applyClassList({inElement: element, inClassList: localClassList});
appendChildren({inElement: element, inChildren: localSpec.children});
return element;
Debuggable
Each UI concern has a visible construction stage.
Predictable
The JSON fields map directly to construction work.