Skip to content

Named slots possibly clashing with {{ slot }} variable and not rendering content to page. #8437

Description

@brew-olly

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:

<!-- components/_accordion.antlers.html -->
<div
  :aria-expanded="openAccordion === {{ index }}"
  aria-label="Accordion-{{ index }}"
  id="accordion-{{ index }}"
>
  {{ partial:layout/flex_column class="bg-white shadow-cards rounded p-6 gap-2" }}
      <div
          class="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:

<!-- layout/_flex_column.antlers.html -->
<div class="{{ 'flex flex-col {{ class }}' | tw_merge}}">
    {{ slot }}
</div>

This is my code attempting to make use of the named slots (but the content not being displayed on the page):

{{ partial:components/accordion index="{{ index }}"}}
    {{ slot:title }}
        {{ partial:typography/h2 content="{{ accordion_title }}" class="text-[22px] font-bold"}}
    {{ /slot:title }}

    {{ slot:icon }}
        <button 
        type="button" 
        class="text-xl transition-all duration-300 ease-in-out" 
        :class="openAccordion === {{ index }} ? 'rotate-45' : 'rotate-0'"
        aria-controls="Accordion-{{ index }}"
        >
            {{ svg src="plus" class="fill-gray-500" }}
        </button>
    {{ /slot:icon }}

    {{ slot:body}}
        {{ partial:typography/p content="{{ accordion_body }}"}}
    {{ /slot:body}}
{{ /partial:components/accordion }}

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:

empty-modules

I can see by dumping the data that it is being passed through to the accordion partial:

dumped-data

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

Environment
Application Name: Statamic Peak
Laravel Version: 10.14.1
PHP Version: 8.2.5
Composer Version: 2.5.5
Environment: local
Debug Mode: ENABLED
URL: ceres-web.test
Maintenance Mode: OFF

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: statamic
Database: mysql
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Statamic
Addons: 6
Antlers: runtime
Stache Watcher: Enabled
Static Caching: Disabled
Version: 4.10.1 PRO

Statamic Addons
marcorieser/tailwind-merge-statamic: 0.2.0
studio1902/statamic-peak-browser-appearance: 3.2
studio1902/statamic-peak-commands: 2.1
studio1902/statamic-peak-seo: 3.0
studio1902/statamic-peak-tools: 3.2
xndbogdan/statamic-bard-text-color: 4.0.0

Installation

Starter Kit using via CLI

Antlers Parser

runtime (new)

Additional details

No response

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions