Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic tag names #428

Open
Nick-Mazuk opened this issue Apr 12, 2024 · 1 comment
Open

Dynamic tag names #428

Nick-Mazuk opened this issue Apr 12, 2024 · 1 comment

Comments

@Nick-Mazuk
Copy link

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
Copy link

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants