How to Handle Empty Slots in Phoenix Components

Published: Jul 1 2023

In Phoenix, as in many other frameworks, components play a crucial role in code reuse and abstraction. They allow us to pass data to the UI in the form of attributes or slots. Slots provide a way to include Heex templates within the component.

But what should we do when a component can accept content in a slot, but none is provided? One option is to make the slot a required field. However, an alternative approach is to create fallback content that will be used if the slot remains empty.

In Phoenix, we can handle this situation as follows. If the slot code appears like this:

<div>
  <%= render_slot(@inner_block) %>
</div>

We can modify it to include fallback content:

<div>
  <%= render_slot(@inner_block) || "This is the default content" %>
</div>

By employing this technique, if the @inner_block slot is not provided, the default content will be displayed instead. It’s important to note that the default content can consist of any valid Heex template code, not just simple strings.

I hope this tip proves helpful if you encounter any challenges with empty slots in your Phoenix projects.