Now, so far we've only needed to create components that accepted a single default slot. But of course, in real life, for more practical applications, what you'll find is some of your components require multiple slots. So let me show you how to do that in this episode. Maybe each of these sections you see here should be their own little panels or cards. So let's do that now. To assignment list, we'll say, how about a background color of like gray-700, maybe a little padding, a border, maybe a border color that's slightly lighter than the background color, and then maybe make it rounded. Let's see how that looks.

And of course, as the application grows, there becomes greater opportunity for these things to become out of sync. So we should fix that. Now notice, this is right up against the edge. Real quick, let's set a class of grid, mostly so I can add some gap all around the children like that. Okay, so let's do this. Let's create a new component. We'll call it Panel or Card, whatever you want. And this will be responsible for our card styling and any behavior we apply to it.

We'll call it panel or card, whatever you want. And this will be responsible for our card styling and any behavior we apply to it. So let's come back. I will snatch all of that and move it over. Now for the heading here, we could either use slots or props, and which one you choose just sort of depends on how flexible it needs to be. Let's start with a prop. So maybe we have a prop called heading, all right? Props will accept a heading, that's a string. So we can use the mustache syntax here, or don't forget, you could also use v-text.

Props will accept a heading, that's a string. So we can use the mustache syntax here, or don't forget, you could also use v-text. Same thing. Cool. So now let's use it. As always, we import it. And we register it as a component, and then we use it. Panel, heading is hello world. Okay, so if we come back and give it a refresh, we get the same thing. Perfect.

Same thing. Okay. Cool. So now when we switch back, I can say, okay, this is my default content. And if we come back, that will be inserted there. But actually as it turns out, there's a long form way that we can do this. We can add a template tag here. I'll paste that in. And then we can use this v-slot directive. And we'll need to give it the name of the slots.

And then we can use this v-slot directive. And we'll need to give it the name of the slots. It's default. So this should do the exact same thing. And it does. It's sort of the long form way of declaring your default slots. Now I show you this because if we also want a heading slot, we're going to use the exact same approach. The slot for the heading. And again, notice this is coming from this.

Okay. It seems like it's fine, but one little issue is if we go up here, you'll see that it's still rendering the <h2> tag. It's just an empty tag. We don't want that. So let's see what we can do here. It sounds like we want to say, well, look, only render this <h2> if we have a heading slot that is being passed in. So I can do that by saying v-if, and all of your slots are going to be stored within this view property called $slots.

So I can do that by saying if, and all of your slots are going to be stored within this view property called $slots. So if we have something for heading, and again, that just means if you provided v-slot:heading anywhere for the component, then and only then should we render an H2. Okay. So we think that should solve the problem. If we take a look, this one doesn't have a heading, so we don't render an H2. This one does, so we do render an H2. And yeah, you can imagine we could do the exact same thing for maybe a footer. This could be your slot for the footer, but we only want to render that if you provided.

Maybe we also want to support themes. And we'll say we have a light theme and a dark theme. So I could say $theme is a string and the default is dark. So what we'll do is read this $theme property to determine which classes should be applied. Let's do this. We'll say this is what we started with. But then we'll say, well, look, if the $theme is dark, then what CSS classes should be applied? Well, maybe the background color. And then what else? The border gray, maybe that's it.

And there we go. So yeah, the entire point is to demonstrate that if you take a little bit of time, you can slowly build up a set of flexible and configurable components that you can use anywhere in the application. So now the only remaining step is to use this for our assignments. So we'll go into assignmentList. Once again, import our panel, register it as a component, and then use it like that. That will self-close automatically. And then I can get rid of some of these classes because the component is now responsible for that.

And then I can get rid of some of these classes because the component is now responsible for that. But a quick little tip, any attributes you pass to a component will automatically be added to the root element of the component. So this allows you to merge in classes from the outside. Or for example, maybe, excuse me, for example, maybe you want to give this particular component or Panel an ID. Well, it's not like I have to declare an ID prop on Panel. No, these are regular attributes, and they will be sent through to the top level element of your component.

No, these are regular attributes, and they will be sent through to the top level element of your component. So if I come back and give this a refresh, this should have an ID of myPanel, and it does. And you can see that width of 60 was merged in with the default classes. So that's a really important technique to be aware of. Switch back, remove the ID, and yeah, we're up and running. So now if we do decide that we need some kind of a footer, then just like before, I could say template v-slot:footer, and then we'll say myFooter goes here, and this should now display between or at the bottom of every assignmentList, and it does.