Composition

fastn components can be composed so that they receive properties and functionality of multiple types.

fastn('ul:list', ...)

In this example, ul will fall into the _generic handler, assuming it is used, and will create a <ul> element, with all properties converted to attributes or properties on the node.

Then, the component will be passed to the list handler, which will add .items and .template properties, and will add children based on the given items/template.

Not all component handlers will place nice together, and some may override properties or functionality added by previous handlers.

Handlers will be called in the order they appear in the string passed to fastn.

To expand on the above example, assuming you have genericComponent and listComponent in your component handlers:

fastn('ul:list', {
	items: ['a','b','c'],
	template: function(){
		return fastn('li',
			fastn.binding('item')
		);
	}
})

^ Try It

Would render as:

<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>