Incorrect Slot Rendering in Nested Components #2071
Description
Tempest version
3.6
PHP version
8.5
Operating system
macOS
Description
When using nested custom components, the templating engine incorrectly handles the passing of named slots from a parent component to a child component. Specifically, content intended for a named slot in the child component is not rendered in its designated slot; instead, it is concatenated with the default slot content and rendered within the child's default slot.
Steps to Reproduce:
- Create a new project.
- Add the following three files to the project:
- x-index.view.php
- x-panel.view.php
- home.view.php
- Render the home.view.php template.
Expected Output:
<div style="display: flex; flex-direction: row; gap: 150px;">
<div>
<p>Left</p>
</div>
<div>
<p>main</p>
</div>
</div>In this expected output, the content
Left
is correctly rendered within the left named slot of the x-index component, andmain
is rendered within its default slot.Actual Output:
<div style="display: flex; flex-direction: row; gap: 150px;">
<div>
<!--<x-slot name="left"/>-->
</div>
<div>
<p>Left</p>
<p>main</p>
</div>
</div>The actual output shows that the left named slot of x-index remains commented out, while the content <p>Left</p> (which was intended for the left slot) is incorrectly rendered alongside <p>main</p> within the default slot of x-index. This indicates that the named slot content from x-panel is being treated as part of the default content for x-index rather than being assigned to its specific named slot.
x-index.view.php
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div style="display: flex; flex-direction: row; gap: 150px;">
<div>
<x-slot name="left"/>
</div>
<div>
<x-slot/>
</div>
</div>
</body>
</html>x-panel.view.php
<x-index>
<x-slot name="left">
<p>Left</p>
</x-slot>
<x-slot/>
</x-index>home.view.php
<x-panel>
<p>main</p>
</x-panel>