Dynamic components

It’s possible to dynamically determine which component is rendered with the built-in <‎Component>. The is attribute is the name of a component in your project. Any other attributes are passed to the component.

It can be used to dynamically render an icon:

// pages/index.stencil
<ButtonWithIcon icon="ArrowUp">
	Click me
</ButtonWithIcon>

// components/ButtonWithIcon.stencil
<button class="text-gray-900">
	<Component
		class="w-4 h-4 text-gray-700"
		#is="icon"
	/>
	<slot />
</button>

It might be useful to bind all properties of a record as attributes:

// pages/index.stencil
@‎each(page in $pages.articles.$pages)
	<Component
		is="{‎{ page.component }}"
		#bind="page"
	/>
@‎endeach

In this example it’s assumed that each page has a ‘component’ property specified with custom data.