Named slots extensions and overrides

[g-nie]

Hey there. I am using cotton in a project and a couple of things came up that feel a bit like they're missing.
The functionality might already be there, I'm not sure, I just didn't find them in the documentation at least.

Named slots extensions

That would basically be the equivalent of having a {% block %} in a parent template and reusing the block content with {{ block.super }} in the child template. An idea of how this could look in cotton:

cotton/card.html

<c-slot name="header">
    <h1>Foo</h1>
</c-slot>

view.html

<c-card>
    <c-slot name="header">
        <c-slot.super />
        <h2>Bar</h2>
    </c-slot>
</c-card>

which would result to <h1>Foo</h1><h2>Bar</h2>

Named slots overrides

I have some use cases where it makes sense that the component provides some default html that most templates use, but then some templates need to override that part with something else, or they might not need it at all.
This is the equivalent of {% block bl %}content A{% endblock %} in the parent template and then {% block bl %}content B{% endblock %} in the child template.
I suppose this can currently be achieved in cotton by passing an extra variable from the templates to the component and then conditionally render the html parts based on that variable. I would like to have a more decoupled way to achieve that, something like:

cotton/card.html

<c-slot name="header">
    <h1>Foo</h1>
</c-slot>

view.html

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

which would result to <h2>Bar</h2>

[wrabit]

1. I think what you might be desiring is "scoped slots" which is not currently supported but it can be a very nice pattern. Allowing you to define content, but with shared context/variable from inside the component:

<!-- dropdown.html -->

<ul>
    {% for item in items %}
        <slot:item item=item>
            <li>{{ item.title }}</option>     <!-- this would be the default content, if not overridden from parent -->
        </slot:item>
    {% endfor %}
</ul>

<!-- view.html -->

<c-dropdown items=items>
    <c-slot name="item" scoped="item">        <!-- We override the default in parent, but with access to the "item" variable in iteration -->
        <li>
            <img src="icon.png" />
            My custom item {{ item.title }}
        </li>
    </c-slot>
</c-dropdown>

Note: This example includes a pattern you refer to in your next point, we can call it something like "expressive slot defaults".

2. Yes I have mulled over this a couple of times before but always just reached for if's inside the component, like:

<!-- cotton/card.html -->

{% if header %}
  {{ header }}
{% else %}
  <h2>Bar</h2>
{% endif %}

(but I'm not sure what you mean 'pass an extra variable'. The variable is the named slot.)

It would be nice to be able to write less and be more expressive, i.e.

<!-- cotton/card.html -->

<slot:header>
  <h2>Bar</h2>
</slot:header>

I think these 2 concepts would be cool to have.

[g-nie]

Yes you're right, my "overrides" concept can simply be done by checking if a named slot is even provided, falling back to a default otherwise. I think I will just use this way going forward.
For the other concept, as far as I'm concerned having a way to extend the component's content is the only thing missing to be on par with the built-in django template tags ({% block %} etc.).
The scoped slots idea seems really cool, hopefully we can get there soon. I would be willing to contribute to this too if you'd like.

Thanks for all the information @wrabit

[wrabit]

Scoped slots won't exactly work like django's block.super approach, I'm not sure how much of a dealbreaker that will be for some.

[g-nie]

By the time scoped slots are in place, and with them the ability to define <slot:>s in components, I can imagine that with minimal changes we can get the "extend" behavior as well (?). I don't really know the technicalities involved of course.
It's definitely not a dealbreaker for me either, it would just be nice to have.