outlet and add

outlet marks a place in the page that any template can add to, and add to adds content there. Use them so a component can bring its own styles and scripts, and they end up in the page's <head>.

{% extends "layouts/base" %}
{% set title = "Home" %}
{% block content %}
	{% include "components/card" with { title: "One" } %}
	{% include "components/card" with { title: "Two" } %}
{% endblock %}

<html>
	<head>
		<title>{{ title }}</title>
		{% outlet "head" %}
	</head>
	<body>
		{% block content %}{% endblock %}
	</body>
</html>

{% props title %}
{% add to "head" once %}
	<link rel="stylesheet" href="/card.css">
{% endadd %}
<article class="card">{{ title }}</article>

<html>
	<head>
		<title>Home</title>
		<link rel="stylesheet" href="/card.css">
	</head>
	<body>
		<article class="card">One</article>
		<article class="card">Two</article>
	</body>
</html>

Adding content

• Content goes to the outlet with the same name, in the order it was added. It doesn't matter whether add to runs before or after the outlet.
• The content lines up with the outlet's indentation.
• The content can read the variables around it. Variables you set inside it stay inside it.
• Content for an outlet the page doesn't have is dropped. A component still works on a page without that outlet, and when you render one block.

Adding once

once adds the content only the first time that tag runs in a render, in the order of the page. A component used many times on a page adds its styles once.

{% add to "head" once %}
	<script type="module" src="/tabs.js"></script>
{% endadd %}

Rules

• Each outlet name can be used once per render.
• Outlet names are plain strings, in both tags.
• An outlet can't be inside cache, set, apply or a macro, because its content is only known when the render ends.
• Content added inside cache is saved with the section, and added again when the saved copy is used.
• flush closes the outlets above it. Adding content to a closed outlet is an error.