Slots

Child content passed to a component is rendered where the <slot /> tag is placed:

// Button.torp
export default function Button() {
	@render {
		<button>
			<slot />
		</button>
	}
}

// App.torp
import Button from "./Button.torp"

export default function App() {
	@render {
		<Button>Click me!</Button>
	}
}

Content inside the <slot> tag is used as a fallback when no children are passed:

// Button.torp
export default function Button() {
	@render {
		<button>
			<slot>
				<span>Click me!</span>
			</slot>
		</button>
	}
}

Named slots

Use a <fill> tag to send content to a named <slot>. Content without a name is sent to the default slot:

// Card.torp
export default function Card() {
	@render {
		<section>
			<header>
				<slot name="header" />
			</header>
			<slot />
		</section>
	}
}

// App.torp
import Card from "./Card.torp"

export default function App() {
	@render {
		<Card>
			<fill name="header">Welcome!</fill>
			<p>The card's content.</p>
		</Card>
	}
}

Let slots

A component can pass data back out to the slot content by adding props to the <slot> tag. The parent accesses them with $slot:

// List.torp
export default function List($props: { items: string[] }) {
	@render {
		<ul>
			@for (let item of $props.items) {
				<li>
					<slot item={item} />
				</li>
			}
		</ul>
	}
}

// App.torp
import List from "./List.torp"

export default function App() {
	let $state = $watch({
		items: ["one", "two", "three"]
	})

	@render {
		<List items={$state.items}>
			{$slot.item}
		</List>
	}
}