Dynamic tag names

[Nick-Mazuk]

Sometimes it's really helpful to make the tag name dynamic.

For instance, let's say you're making a button component. Sometimes buttons are HTML <a> tags (e.g., for links) and sometimes they're HTML <button> tags (e.g., to submit a form). But much of the styling and JS functionality is the same.

Several front-end frameworks allow the tag names to be dynamic. For instance with Svelte, you can write the following:

<script>
    explort let href = ''
    const tag = href ? "a" : "button"
</script>

<svelte:element this={tag} {href}>
    I'm a button
</svelte:element>

It would be great to allow Maud to have similar functionality.

[Azel-ytof]

Hi, It is a feature I'm looking for too, because I use native webcomponent, so I have custom tag name. Actually, I have found a workaround :

html! {
    (PreEscaped(format!("<{} content=\"{}\"></{}>", component.name, component.content)))
}

It could be nice to have something that let us make a cleaner line, or to have the possibility to extends existant tags (like head, div, p, ...), maybe with a trait or something else ?