Introducing Named Slots 0:00Next up, let's review named slots. Now, a few episodes ago, we created a modal component, but I cheated a little bit. Let's go to Bulma. They provide the CSS for these components. And if we go to modal, yeah, this is what I demonstrated. But a more traditional modal will take the shape of something like this, where you have a header, main content, and a footer. So when we are using components like this, and we want it to be dynamic, we need some way to say, I want to slot the title in right here. I'd like to slot the content here. Building Modal Template 0:25we need some way to say, I want to slot the title in right here. I'd like to slot the content here. And I'd like to slot the footer here. That's what named slots are for. Okay, so let's just dive right in. Here's the markup for such a thing. And I'm going to switch over to Sublime, main.js. And we will create the component, modal. And the template is going to be what we just copied. I'll paste it in.And the template is going to be what we just copied. I'll paste it in. Okay, next, content, we'll just say temporary content for now. And yeah, we have the header section that has a title and a delete button, the main content, and then the footer. So that means we can now reference it right here. Okay, let's view it in the browser. But yeah, we're not going to see anything right now. And that's because Bulma requires you to toggle a class called isActive. But if you remember a few episodes ago, we just applied it always, Default Slot Limitation 1:07And that's because Bulma requires you to toggle a class called isActive. But if you remember a few episodes ago, we just applied it always, and then deferred to view to determine when to show it or not. So I will add that class. And if I give it a refresh, there we go. The next step is, let's make all of this dynamic. I don't want to hard code it. Now what we learned a few episodes ago when we talked about slots for the first time is yes, you could do something like this. So if I want the title to be dynamic, I could always say slot right here.is yes, you could do something like this. So if I want the title to be dynamic, I could always say slot right here. Think of this as your default slot. So yes, if I were to come back and I were to type anything at all here, if we then switch to Chrome and give it a refresh, that is working. But the problem is, that only works for a single default slot. So if I need something else in the footer, yeah, how do I do that? Again, that's why we defer to name slots. Let's do this. Let's come back to main.js.Let's do this. Let's come back to main.js. And I'm now going to say one of two things. We could either make this whole thing a slot, and then make the process of adding this specific class the user's responsibility. They could do that. But I don't like to do that quite as much, because then every time I reference a modal, I have to remember what is the class name for this to make it display properly. It would be nice if our view component could handle that, Creating Header Named Slot 2:20I have to remember what is the class name for this to make it display properly. It would be nice if our view component could handle that, and then I could just paste in some text and be on my way. So with that in mind, we're going to keep the syntax, and then I will use a slot, but give it a name of header. Now I have a named slot. And I'll keep the delete button here. Okay, so if we were to switch back, yes, we could use a div or something, and we could say this will be for the header slot.yes, we could use a div or something, and we could say this will be for the header slot. Like so. So now take a look. If I switch back to Chrome and I give it a refresh, there we go. It works. But here's one thing to keep in mind. If we view the source, you'll remember that the wrapper was a p tag, and we needed some tag to wrap our title in, but we ended up with a situation where a div is nested within a p, Using Template Wrapper 3:03and we needed some tag to wrap our title in, but we ended up with a situation where a div is nested within a p, which is not what we want. So you have a couple choices. Sometimes this can just be whatever you need it to be. Like if you want it to be a heading one, then you can use that. But other times, like what we have right now, I don't really want any tag here. I just want to spit text in. So for those situations, we can use the template tag name. Adding Content and Footer Slots 3:24I just want to spit text in. So for those situations, we can use the template tag name. Now, if I were to give it a refresh, we'll get our text, but the template will be stripped out and we just get a p tag alone. That's exactly what we want. Okay, next, let's see if we can take this a step further. We have our header done. Next, we can do our main content area. And as you'll find, you can use name slots and default slots in tandem. So for example, if I just want the default slot content to go right here,And as you'll find, you can use name slots and default slots in tandem. So for example, if I just want the default slot content to go right here, there's no need to even give it a name. So if we were to try this, here is my main content. Yeah, anything here that's not wrapped within a name slot will be inserted there. So if I give it a refresh, now it works. But next, take a look at this. You can have default slot content. So if I were to say something like this, default content here, it's not overly appropriate, but we'll find a good use case for it in the footer.So if I were to say something like this, default content here, it's not overly appropriate, but we'll find a good use case for it in the footer. But anyways, if I were to come back and refresh, I don't see anything. But if I do not have any default content here, and I give it a refresh, you'll see that it does use that. So that's a nice way to provide default content that can be overwritten by the user. Okay, but like I said, not entirely appropriate here. So I will keep it like this. Finally, our footer. Let's grab this, and we'll say slot, and this will be the footer section.Finally, our footer. Let's grab this, and we'll say slot, and this will be the footer section. Now, back in index.html, yeah, once again, you could do div if you want, and then paste these in. And then let's bring back that lorem text for the main content area. But yeah, if we give it a refresh now, it's all working the way it did before. So like I said earlier, yeah, this could be a good use case for default content. Like maybe you want the default button to be something generic, like okay. So let's paste this in, and yeah, we'll just say okay. Now, take a look.So let's paste this in, and yeah, we'll just say okay. Now, take a look. If I do not add a footer section at all, we will see okay. But if I want to change those buttons, I can just add a slot for the footer, and then that will take precedence, as you can see here. But yeah, we still have that same thing where we have a footer, and then a div within it. And really, that's kind of fine in this case, but exact same tip. If you don't want a wrapper at all, just use the template. And now this will be inserted directly within the footer. Give that a refresh, and there you go.And now this will be inserted directly within the footer. Give that a refresh, and there you go. All right, that's named slots in a nutshell.
