Named {{ attrs }}

[kanishk619]

Is there possibility of having named {{ attrs }} ?

Consider the below example

<div class="card shadow-sm" {{ card_attrs }}>
    {% if header_slot %}
        <c-card.header title="{{ title }}" {{ header_attrs }}>
            {{ header_slot }}
        </c-card.header>
    {% endif %}

    {% if body_slot %}
        <c-card.body {{ body_attrs }}>
            {{ body_slot }}
        </c-card.body>
    {% endif %}

    {% if footer_slot %}
        <c-card.footer {{ footer_attrs }}>
            {{ footer_slot }}
        </c-card.footer>
    {% endif %}
</div>

I can, for example, send them across using standard attributes like

<c-card card_attrs='style="color: #ffff"'/>

But this will make it messy in case of multiple attributes. Can we have something like <c-attrs /> declaration for this?

[wrabit]

I am not sure if the result is worth it or (IMO) desirable vs the effort and additional processing required.

Instead I would try to encourage to have explicit options from a top level, more like:

<c-card text-color="light" header-style="h2" :footer-visible="False" />

I think the {{ attrs }} everywhere approach could get a little unwieldy. To build a robust re-usable component, you want something that is difficult to break, creating thought-out options will help achieve this. Opening the door to throwing an attrs on any sub element, you will quite easily make the component difficult to maintain due to:

• 1. decreased isolation (you would have to search the usages to check and control presentation vs keeping it inside the component file)
• 2. difficult to carry out modifications to the component because you have to know what is being changed via direct attribute modification.