--- title: "Conditionally rendering a HEEX template slot" url: https://daily.dev/posts/conditionally-rendering-a-heex-template-slot-pwec9aff3 source_url: https://forum.elixirforum.com/t/conditionally-rendering-a-heex-template-slot/76438 type: article source: "Elixir Forum" published: 2026-08-23T15:35:15.329Z updated: 2026-08-23T15:35:39.446Z tags: ["css", "elixir", "liveview"] reading_time: 2 upvotes: 0 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Conditionally rendering a HEEX template slot **[Elixir Forum](https://daily.dev/sources/elixirforum)** · 2 min read · 0 upvotes · 0 comments ## Summary A developer shares a workaround for detecting empty HEEX slots in Phoenix LiveView. Since {nil} renders as whitespace rather than truly empty content, CSS :empty pseudo-class checks fail. An existing article's slot_empty? approach breaks when used with lists of slots that each render to whitespace individually but get concatenated. The post provides a macro, maybe_render_slot, that actually renders the slot content, uses a regex to check if the result is all whitespace, and returns nil if so, allowing conditional rendering with a placeholder sibling element via CSS :only-child selectors. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does an empty HEEX slot in Phoenix LiveView still fail a CSS :empty check? An empty slot like {nil} renders as with whitespace rather than truly empty content, and the CSS :empty pseudo-class does not tolerate any whitespace at all. The experimental :blank pseudo-class would solve this but is not yet supported by any browser, so whitespace-only content still fails the :empty test. _Developers debugging LiveView rendering quirks can find workarounds like this one on daily.dev._ ### Why does the slot_empty? helper report a non-empty slot when using a list of slots in Phoenix LiveView? The slot_empty? approach breaks down when called with a slot from a list of slots because rendering each individually blank slot and checking them in sequence causes the function to report both as not empty even though each renders to nothing but whitespace. This happens specifically with multiple <:item> entries passed to a component. _Comparing slot-handling approaches for Phoenix components is easier when tracking real-world edge cases on daily.dev._ ### How can I conditionally render a Phoenix LiveView slot only if it contains non-whitespace content? Define a macro that renders the slot via Phoenix.Component.__render_slot__, converts it to iodata with Phoenix.HTML.Safe.to_iodata, and runs a regex check for all-whitespace content using Erlang's :re.run. If the result is blank, return nil so the slot is skipped; otherwise wrap it in Phoenix.HTML.raw for use in the template alongside a placeholder sibling. _Elixir developers solving LiveView template quirks can track practical fixes like this on daily.dev._ ## Similar posts on daily.dev - [A workaround for hiding empty slots in Chromium](https://daily.dev/posts/a-workaround-for-hiding-empty-slots-in-chromium-mp3d1elvv) · Dave Rupert · 0 upvotes · 0 comments - [Practical CSS: Combining :has, :not, :only-child and :placeholder-shown pseudo-classes](https://daily.dev/posts/practical-css-combining-has-not-only-child-and-placeholder-shown-pseudo-classes-5gvvbff0w) · RUBYLAND · 9 upvotes · 0 comments - [Elixir Programming Language Forum](https://daily.dev/posts/elixir-programming-language-forum-qyfr7vfn8) · Elixir Forum · 0 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#elixir](https://daily.dev/tags/elixir), [#liveview](https://daily.dev/tags/liveview) [View this post on daily.dev](https://daily.dev/posts/conditionally-rendering-a-heex-template-slot-pwec9aff3)