--- title: Conditionally rendering a HEEX template slot | daily.dev description: A developer shares a workaround for detecting empty HEEX slots in Phoenix LiveView. Since {nil} renders as whitespace rather than truly empty content, CSS... canonical: https://daily.dev/posts/conditionally-rendering-a-heex-template-slot-pwec9aff3 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Conditionally rendering a HEEX template slot | daily.dev og:description: A developer shares a workaround for detecting empty HEEX slots in Phoenix LiveView. Since {nil} renders as whitespace rather than truly empty content, CSS... og:url: https://daily.dev/posts/conditionally-rendering-a-heex-template-slot-pwec9aff3 og:image: https://api.daily.dev/og/posts/PWEC9AFf3.png og:image:alt: Conditionally rendering a HEEX template slot og:image:width: 1200 og:image:height: 630 og:locale: 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 · 7 upvotes · 0 comments - [Elixir Programming Language Forum](https://daily.dev/posts/elixir-programming-language-forum-qyfr7vfn8) · Elixir Forum · 0 upvotes · 0 comments - [Let’s Use the Nonexistent ::nth-letter Selector Now](https://daily.dev/posts/let-s-use-the-nonexistent-nth-letter-selector-now-jbbuo5t4b) · CSS-Tricks · 12 upvotes · 0 comments - [Preventing line breaks in elements](https://daily.dev/posts/preventing-line-breaks-in-code-elements-0yr0po6gs) · Hacker News · 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) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Conditionally rendering a HEEX template slot","url":"https://daily.dev/posts/conditionally-rendering-a-heex-template-slot-pwec9aff3","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/conditionally-rendering-a-heex-template-slot-pwec9aff3"},"datePublished":"2026-08-23T15:35:15.329Z","dateModified":"2026-08-23T15:35:39.446Z","description":"A developer shares a workaround for detecting empty HEEX slots in Phoenix LiveView. Since {nil} renders as whitespace rather than truly empty content, CSS...","image":"https://media.daily.dev/image/upload/s--foaA6JGU--/f_auto/v1722860399/public/Placeholder%2004","thumbnailUrl":"https://media.daily.dev/image/upload/s--foaA6JGU--/f_auto/v1722860399/public/Placeholder%2004","isAccessibleForFree":true,"articleSection":"Elixir Forum","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Elixir Forum","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/c7c05785a0da4507bf9ae120a7e487e6","url":"https://daily.dev/sources/elixirforum"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/conditionally-rendering-a-heex-template-slot-pwec9aff3","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,elixir,liveview","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Elixir Forum","item":"https://daily.dev/sources/elixirforum"},{"@type":"ListItem","position":3,"name":"Conditionally rendering a HEEX template slot"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/conditionally-rendering-a-heex-template-slot-pwec9aff3#faq","mainEntity":[{"@type":"Question","name":"Why does an empty HEEX slot in Phoenix LiveView still fail a CSS :empty check?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"Why does the slot_empty? helper report a non-empty slot when using a list of slots in Phoenix LiveView?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"How can I conditionally render a Phoenix LiveView slot only if it contains non-whitespace content?","acceptedAnswer":{"@type":"Answer","text":"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."}}]} ```