# outlet and add

> Let components add styles and scripts to the page's head.

`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>`.

page.kiln:

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

layouts/base.kiln:

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

components/card.kiln:

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

Output:

```html
<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](https://kilnlang.com/docs/api/rendering/#rendering-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.

```kiln
{% 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`](https://kilnlang.com/docs/tags/cache/) is saved with the section, and added again when the saved copy is used.
- [`flush`](https://kilnlang.com/docs/tags/flush/) closes the outlets above it. Adding content to a closed outlet is an error.