c-slot

<c-slot> passes a block of HTML into a component under a name. Inside the component it's a variable holding rendered, safe HTML.

<c-card>
    <c-slot name="header">
        <h2>Weather</h2>
    </c-slot>

    Sunny, 23°
</c-card>

{% cotton card %}
    {% cotton:slot header %}
        <h2>Weather</h2>
    {% endcotton:slot %}

    Sunny, 23°
{% endcotton %}

<div class="card">
    <div class="card-header">{{ header }}</div>
    {{ slot }}
</div>

Rules

• <c-slot> goes between a component's tags. It can be wrapped in HTML or in template logic like {% if %}. Using it outside any component is an error.
• Everything between the component's tags that isn't in a named slot is the default slot, {{ slot }}.
• A slot can contain anything a template can: HTML, variables, other components, more slots inside those.
• Hyphenated names are available as snake_case: name="leading-icon" becomes {{ leading_icon }}.
• A slot with the same name as a <c-vars /> key takes precedence over the var's default.

Checking for a slot

Slots are plain variables, so {% if %} works:

{% if header %}
    <div class="card-header">{{ header }}</div>
{% endif %}

Template tag syntax

{% cotton:slot header %}<h2>Weather</h2>{% endcotton:slot %}