[10.x] Attributes support on default component slot

[royduin]

This way we can use $slot->attributes and it's backwards compatible as the attributes are optional. Example usage; a checkbox component with a slot for the label:

<label>
    <input {{ $attributes->merge(['type' => 'checkbox', 'class' => 'border-red']) }}>
    <div class="bg-yellow">
        {{ $slot }}
    </div>
</label>

Usage:

<x-checkbox class="border-green" v-model="something">
    Content
</x-checkbox>

But if we want to change the bg-yellow we could create props like labelClass but if we also want an ID we also get labelId etc. So better to use an attribute bag. We could do so by using an named slot like ($slot => $label):

<label>
    <input {{ $attributes->merge(['type' => 'text', 'class' => 'border-red']) }}>
    <div {{ $label->attributes->class('bg-yellow') }}>
        {{ $label }}
    </div>
</label>

This way we can do this:

<x-checkbox class="border-green" v-model="something">
    <x-slot:label class="bg-green" id="something">
        Content
    </x-slot:label>
</x-checkbox>

But if we do not need any extra attributes we can't do this anymore:

<x-checkbox class="border-green" v-model="something">
    Content
</x-checkbox>

As we don't do anything with the default slot. We could do this:

<label>
    <input {{ $attributes->merge(['type' => 'text', 'class' => 'border-red']) }}>
    <div {{ $label?->attributes?->class('bg-yellow') }}>
        {{ $label ?? $slot }}
    </div>
</label>

But now the bg-yellow isn't working anymore.

With this pull request we can do this:

<label>
    <input {{ $attributes->merge(['type' => 'text', 'class' => 'border-red']) }}>
    <div {{ $slot->attributes->class('bg-yellow') }}>
        {{ $slot }}
    </div>
</label>

And now this works:

<x-checkbox class="border-green" v-model="something">
    <x-slot:slot class="bg-green" id="something">
        Content
    </x-slot:slot>
</x-checkbox>

And also this:

<x-checkbox class="border-green" v-model="something">
    Content
</x-checkbox>

Which is useful when we want some default styling on the label with the possibility to override/extend it without the need to check if the named slot is used or not within the component.