You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using a partial with named slots, but no generic {{ slot }}, if you have a partial within that partial that has {{ slot }} then content does not appear to be rendered to the page. It's hard to explain, so here's some of the code I was using.
Here is my _accordion partial that has the named slots I use to drop content into:
<!-- components/_accordion.antlers.html -->
<div:aria-expanded="openAccordion === {{ index }}"aria-label="Accordion-{{ index }}"id="accordion-{{ index }}"
>
{{ partial:layout/flex_columnclass="bg-white shadow-cards rounded p-6 gap-2" }}
<divclass="flex items-center justify-between cursor-pointer"x-on:click="openAccordion === {{ index }} ? openAccordion = null : openAccordion = {{ index }}"
>
{{ slot:title }}
{{ slot:icon }}
</div>
<div:class="openAccordion === {{ index }} ? 'max-h-96' : 'max-h-12'"class="overflow-hidden transition-all duration-500 ease-in-out ":aria-hidden="openAccordion !== {{ index }}":aria-labelledby="'accordion-{{ index }}'"
>
{{ slot:body }}
</div>
{{ /partial:layout/flex_column }}
</div>
This partial does not use a generic {{ slot }} as I specifically only want content to be in named slots.
However, my _flex_column partial does use the generic {{ slot }} syntax:
The thought being that anything passed into the named slots in the accordion partial will be rendered inside my flex container partial. However when trying to use the named slots it just rendered my components without any content, even though it is making use of the named slots:
I can see by dumping the data that it is being passed through to the accordion partial:
The only way I could resolve this was by switching the _flex_column partial with a div and applying my flex classes on that, thereby removing the generic {{ slot }} entirely.
How to reproduce
Create an _accordion.antlers.html partial and a _flex_column.antlers.html partial using my code above, changing the file path on the partials if your folder structure differs.
It uses AlpineJS to handle the accordion interaction so remove that code if you need to, or install the dependency.
Use the _accordion partial and pass some data into the named slots to see if it renders content to the page.
The text was updated successfully, but these errors were encountered:
brew-olly
changed the title
Named slots not rendering content to page in some cases.
Named slots possibly clashing with {{ slot }} variable and not rendering content to page.
Jul 12, 2023
Bug description
When using a partial with named slots, but no generic
{{ slot }}
, if you have a partial within that partial that has{{ slot }}
then content does not appear to be rendered to the page. It's hard to explain, so here's some of the code I was using.Here is my
_accordion
partial that has the named slots I use to drop content into:This partial does not use a generic
{{ slot }}
as I specifically only want content to be in named slots.However, my
_flex_column
partial does use the generic{{ slot }}
syntax:This is my code attempting to make use of the named slots (but the content not being displayed on the page):
The thought being that anything passed into the named slots in the accordion partial will be rendered inside my flex container partial. However when trying to use the named slots it just rendered my components without any content, even though it is making use of the named slots:
I can see by dumping the data that it is being passed through to the accordion partial:
The only way I could resolve this was by switching the
_flex_column
partial with a div and applying my flex classes on that, thereby removing the generic{{ slot }}
entirely.How to reproduce
Create an
_accordion.antlers.html
partial and a_flex_column.antlers.html
partial using my code above, changing the file path on the partials if your folder structure differs.It uses AlpineJS to handle the accordion interaction so remove that code if you need to, or install the dependency.
Use the
_accordion
partial and pass some data into the named slots to see if it renders content to the page.Logs
No response
Environment
Installation
Starter Kit using via CLI
Antlers Parser
runtime (new)
Additional details
No response
The text was updated successfully, but these errors were encountered: