Skip to content

Bug on sharing slot attributes #47008

@ph7jack

Description

@ph7jack

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

  1. Create a new Laravel 10 project
  2. Create the container.blade.php component
  3. Create the parent.blade.php component
  4. Test the behaviors on the welcome page by importing the component there.
    4.1 Import this code snippet
    <x-parent>
        Parent
        <x-slot:child>
            Child
        </x-slot:child>
    </x-parent> 
    4.2 When loading the welcome route, you should see the following error Illuminate\View\ComponentSlot::withAttributes(): Argument #1 ($attributes) must be of type array, null given, called in
  5. Replace the slot usage in the parent component with the following code snippet. It should work and render the welcome page.
    @slot('child', $child, $child->attributes)
    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.
    <x-parent style="background: black; color: white; padding: 4px;">
         Foo
         <x-slot:child style="background: red;">
             Child
         </x-slot:child>
     </x-parent>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions