So I keep saying how live wire components are like souped up blade components, but until live wire version four, there were still a few really useful things about blade components that live wire components couldn't do. And the first one is attribute forwarding. So let me show you. Here's this page where we have this root level post index component with a loop that shows all of the nested card components inside of it. And if we look at that, it's super

of the nested card components inside of it. And if we look at that, it's super straightforward for each post. And then here's our nested child component and then this is the child component itself with a little card component and a bunch of stuff inside of it showing a title and whatnot, right? Well a pretty common thing when you have nested components is you wanna pass bespoke HTML attributes.

Well a pretty common thing when you have nested components is you wanna pass bespoke HTML attributes. That might be an alpine thing like Exxon click, it might be disabled if it's a checkbox or something. Or more commonly it's classes. You wanna pass classes into child components so that you can customize what that child component looks like for your specific use case. So here, let's say BG black and then we load the page and nothing happened.

So here, let's say BG black and then we load the page and nothing happened. So this is kind of surprising to a user, but if you're used to blade components, you're not surprised, you go, oh yeah, you can't just pass class into a blade component. The blade component doesn't know where to put it. So you do something like this, attributes, right? And that should work. But we also have hard coded classes here.

And that should work. But we also have hard coded classes here. So a pretty common pattern that you'll see is the attribute bag in Laravel. So this is actually the exact variable that gets sent to a blade component. So in case you know, we don't need to go deep on component attributes in this attribute bag, but if you use it a lot and you're intimately familiar with it, you can rest assured

but if you use it a lot and you're intimately familiar with it, you can rest assured that everything from blade components is gonna work here. If you have attribute bag macros or if you're used to using really kind of esoteric parts of it, like they all still work. So let's say class, let's rip this whole class outta here and put it in there. Whoops, that's not it. Okay. And then we'll remove class from here.

Whoops, that's not it. Okay. And then we'll remove class from here. Okay, so now we're forwarding all of the attributes to this card element or component in this case. And we're saying and make these classes, merge these classes in as well. Um, so that those exist as well. So now we save both of these. We refresh and there we go. All of our card components are black. Um, that's not a very realistic scenario.

All of our card components are black. Um, that's not a very realistic scenario. So the best one that I could think of is if you wanted to do like post status is draft. I wanna make border dashed for each card, otherwise just an empty string. And that didn't work because we don't have any draft components. So let's just wipe our database real quick on the fly 'cause we're here, we're hanging out.

So let's just wipe our database real quick on the fly 'cause we're here, we're hanging out. Alright, so now we have some draft components and the ones that are draft have a nice little dashboard and the other ones don't. And we did that all from the comfort of the parent component using attribute forwarding. So that's the first big piece that we wanted to tackle. It's just a quality of life thing that you expect to work that didn't work before.

It's just a quality of life thing that you expect to work that didn't work before. Now let's tackle the big one slots. I'll see you there.