-
Notifications
You must be signed in to change notification settings - Fork 11.6k
Description
Laravel Version
10.10.0
PHP Version
8.2.6
Database Driver & Version
No response
Description
Hello, consider the following context.
You have a parent component using a container component, and sharing a child slot.
The parent component will forward the $child slot to the container component child slot with its attributes.
Related issue: #32576
container.blade.php
<div {{ $attributes }}>
{{ $slot }}
@isset($child)
<div {{ $child->attributes }}>
{{ $child }}
</div>
@endisset
</div>parent.blade.php
<x-container {{ $attributes }}>
Parent
@isset($child)
<x-slot:child {{ $child->attributes }}>
{{ $child }}
</x-slot:child>
@endisset
</x-container>In this way, we will get an error:
Illuminate\View\ComponentSlot::withAttributes(): Argument #1 ($attributes) must be of type array, null given, called in /project-folder/vendor/laravel/framework/src/Illuminate/View/ComponentSlot.php on line 34
However, is possible to share the attributes using the @slot directive
@slot('child', $child, $child->attributes)Also, is impossible to share attributes using the :attributes="$child->attributes" prop
<x-slot:child :attributes="$child->attributes">
{{ $child }}
</x-slot>It will render something like this
<div attributes="class=\" bg-red-100\""=""></div>For developers working on component creation, the <x-slot /> syntax is really useful for reading the code.
Thanks for the amazing blade ecosystem!
Steps To Reproduce
To reproduce this error, follow these steps
- Create a new Laravel 10 project
- Create the
container.blade.phpcomponent - Create the
parent.blade.phpcomponent - Test the behaviors on the welcome page by importing the component there.
4.1 Import this code snippet4.2 When loading the welcome route, you should see the following error<x-parent> Parent <x-slot:child> Child </x-slot:child> </x-parent>
Illuminate\View\ComponentSlot::withAttributes(): Argument #1 ($attributes) must be of type array, null given, called in - Replace the slot usage in the parent component with the following code snippet. It should work and render the welcome page.
5.1 Replace the parent component usage in the welcome page with the following code. It should work and show the bg colors red and black. The attributes are shared now.
@slot('child', $child, $child->attributes)
<x-parent style="background: black; color: white; padding: 4px;"> Foo <x-slot:child style="background: red;"> Child </x-slot:child> </x-parent>