Create a LiveView component with a dynamic HTML tag?

I’m looking into possibilities to create a LiveView function component, where the user can provide the tag it should render. There are similar things in Frontend world (like React), where you can do things like:

<SomeComponent.div>
# content
</SomeComponent.div>

# or
<SomeComponent.span></SomeComponent.span>

#or
<SomeComponent as="div"></SomeComponent>

What whould be a straight forward way to achieve something like this in LiveView? I couldn’t find anything so far and don’t know if there is any way to create a tag dynamically, so that change tracking works. (Phoenix.HTML.Tag.content_tag breaks change tracking).

The only thing I came up with is to write a macro, which generates a function component returning the according ~H sigil with the proper tag.

Any ideas?

1 Like

Wait for 0.18: phoenix_live_view/CHANGELOG.md at main · phoenixframework/phoenix_live_view · GitHub

4 Likes

Ah, I totally missed that. Thanks for the hint.