30:T54d,md`# Nesting & Setting viewof The objective is to build custom HTML structures which: + can be [**viewof**](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof)-ed + can be programmatically set - e.g. most in [@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs) cannot + are easily nestable in tree-shaped custom compositions Below are sample "components": + **leafs** i.e containing HTML elements capturing user actions + **aggregator** i.e. grouping leafs or other aggregators components In short, each component has the following characteristics: + it returns HTML to display + it has a \`value\` property: \`int\`, \`float\`, \`string\`, \`array\`, \`object\` containing the component value + it emits input events when \`value\` change + it has an \`update\` property: a function to update \`value\` from outside the component *Reference* - notebooks exploring the **viewof** command: + [@mbostock/views-are-mutable-values](https://observablehq.com/@mbostock/views-are-mutable-values) + [@observablehq/introduction-to-views](https://observablehq.com/@observablehq/introduction-to-views) + [@tmcw/exploring-viewof](https://observablehq.com/@tmcw/exploring-viewof) + [@mootari/combining-forms](https://observablehq.com/d/852ff200776cb9f4) + [@mootari/ghost-letters](https://observablehq.com/@mootari/ghost-letters) `31:T807,function combo2() { const s1 = slider(20, 's1'); const c1 = checkbox(true, 'c1'); const m = matrix(3, 2, [1, 2, 3, 4, 5, 6]); const n = name(); const arr = 'abcdrfghijk'.split('').map((e, i) => [e, (i + 1) * 4]); const vs = vsliders(arr, 100, '30%'); const btns = ['Box1', 'Box2', 'Box3', 'Box4'].map(e => { const btn = html`