{% load component_tags %}
{% component "test" name='Igor' %}
{% fill "header" %} <!-- This fill is rendered correctly -->
{% component "test" name='Joe2' %}
{% fill "header" %} <!-- This fill is rendered correctly -->
Name2: {{ name }}
{% endfill %}
{% fill "main" %} <!-- This is rendered correctly. BUT fill is applied also to the outer component -->
Day2: {{ day }}
{% endfill %}
{% fill "footer" %} <!-- This is rendered correctly. BUT fill is applied also to the outer component -->
XYZ
{% endfill %}
{% endcomponent %}
{% endfill %}
<!-- ERROR HERE: explicit "footer" slot fill is ignored because of the inner slot fill -->
{% fill "footer" %}
WWW
{% endfill %}
<!-- ERROR HERE: the default "main" slot fill is ignored because of the inner slot fill -->
{% endcomponent %}
See the error from https://github.com/EmilStenstrom/django-components/discussions/419#discussioncomment-9209027. It seems the slot fills of inner component override the OTHER slots of the outer component.
Using the template from
slotted_template.html
: