Attribute Proxying

The :attrs dynamic attribute enables us to create wrapper components that proxy all their attributes to an inner component:

view.html

<c-outer
    class="outer-class"
    :count="42"
    :enabled="False">
    Content passed to inner component
</c-outer>

{% cotton outer class="outer-class" :count="42" :enabled="False" %}
    Content passed to inner component
{% endcotton %}

cotton/outer.html

<c-inner :attrs="attrs">{{ slot }}</c-inner>

{% cotton inner :attrs="attrs" %}{{ slot }}{% endcotton %}

cotton/inner.html

{{ class }}     <!-- "outer-class" -->
{{ count }}     <!-- 42 -->
{{ enabled }}   <!-- False -->
{{ slot }}      <!-- Content passed to inner component -->

The attributes are passed through to the inner component with their original types preserved (strings, numbers, booleans, lists, etc.), making this pattern ideal for creating higher-order components.

This pattern is particularly useful for Django form fields, where you might create a component hierarchy that passes Django widget attributes through multiple layers while adding labels, error handling and styling at each level.

back Component Variants

next Compound Components