LiveView functional components code style: slots or attributes?

[Athunnea]

I have been playing with Functional Components from LiveView 0.17. In some cases you can achieve the same result using either slots or attributes. What do you think works better in the following cases?

Using attributes

<Components.badge text={@text} />

<Components.description_list elements={
  [
    {gettext("Legal Name"), @company.legal_name },
    {gettext("Country"),    @company.country    },
    {gettext("Address"),    @company.address    },
  ]
} />

Using slots

<Components.badge><%= @text %></Components.badge>

<Components.attributes>
  <:attribute label={gettext("Legal Name")}><%= @company.legal_name %></:attribute>
  <:attribute label={gettext("Country")}>   <%= @company.country    %></:attribute>
  <:attribute label={gettext("Address")}>   <%= @company.address    %></:attribute>
</Components.attributes>

---

This is for text values only. For html blocks I’d use slots.

It seems that using attributes is a bit cleaner, less visual noise. Maybe that is because I personally hate <%= ... %> ever since I started using Rails ages ago. It’s noisy and takes some effort to type. {...} is so much cleaner. On the other hand, using attributes for content feels a bit wrong.

So, attributes or slots?

• Attributes obviously, it’s cleaner
• Keep attributes for attributes, use slots for content

[sodapopcan]

I would say instead of either of them, provide a Components.description_item component. If you are building a library and want to give people options, I would make both the elements attribute and description_item available. Either way, I wouldn’t use slots for this.