[TwigComponent] A HtmlTag meta-component to easily renders dynamic HTML tag / attributes

[Kocal]

Hi!

Sometimes, inside a Twig template, you need to render HTML with a dynamic tag or attributes, depending if variables/props are presents, depending of their values, etc...

Given the following template:

{% set tag = href ? 'a' : 'p' %}

<{{ tag }}
    {% if href %} href="{{ href }}"{% endif %}
    {% if title %} title="title"{% endif %}
    {% if newTab %} target="_blank"{% endif %}
>
    ...
</{{ tag }}>

We can see that it is not easy to render a dynamic tag (you must think about the closing tag too), and you can't re-use attributes nor use a new ComponentAttributes instance (because you are not inside a Twig Component) to easily render tags.

Currently you need to do it yourself and it can leads to inconsistency / bad readability.

With a new meta-component (which has no logic but to renders HTML), we can imagine passing a tag and HTML attributes as an object (think as a simplified h function):

{% component HtmlTag with {
    _tag: href ? 'a' : 'p',
    href,
    title,
    ...(newTab ? { target: '_blank' } : {})
} %}
    ...
{% endcomponent %}

(The _ prefix in _tag is here to prevent a potential conflict with a tag HTML attribute, but maybe there is a better solution?)

The template associated to this components would looks like this:

<{{_tag}} {{ attributes }}>{% block content %}{% endblock %}</{{_tag}}>

WDYT?
Thanks

[WebMamba]

Yes, I like the idea! I remember that @norkunas was doing something similar I ping you here in case you are interest by the topics.

[Kocal]

Or maybe we can simply use the HTML tag name as meta-component, but IDK how it can works if it's dynamic.

[norkunas]

For simplicity in components I define as string|false for example $href and in template:

<{{ element }}{{ attributes.defaults({ href })>
  {% block content %}{% endblock %}
</{{ element }}>

So if href is not set it won't be included in output

[kbond]

I think this will be pretty simple once #802 is available.

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[carsonbot]

Friendly reminder that this issue exists. If I don't hear anything I'll close this.

[Kocal]

Yes and no, #1414 can fill the feature but is still opens

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[carsonbot]

Just a quick reminder to make a comment on this. If I don't hear anything I'll close this.