The @component tag allows you to use an edge template as a component.

@!component('components/button', {
title: 'Hello world'

You can also derive the component name from a runtime value.

@!component(currentTheme.button, {
title: 'Hello world'


The @slot tag allows you define the markup for the named slots. It accepts the slot name as the first argument and can also receive additional arguments from the component template.

This is the content for the main slot

If the component passes any additional arguments to the slot, then you can access them as follows:

@slot('main', scope)
{{ scope.title }}

Since slots are regular functions, the component calls the function and passes it the arguments.

{{{ await $slots.main({ title: 'Hello world' }) }}}


The @inject tag allows the component template to inject data into the component tree. The tag accepts an object as the only argument.

@inject({ tabs: [] })