Transcript from the "Composing Components with Slots" Lesson
[00:00:00]
>> So far when talking about components containing other components, it's been a direct parent child relationship. But very often when you're building an application, you will need to pass some content into the component, not as props but as markup. And for that we have something called slots. This is a process called component composition.
[00:00:20] So in the same way that an element can have children like this, a div can contain paragraphs. A component can have children but it needs to know where to put them. So inside our box component here, which is going to contain our content. I'm going to replace this comment with a slot element.
[00:00:42] And now that we've done that inside our App.svelte, we can put some content inside the box. And we can put whatever we like inside that slot. Now in some situations you might need to have some fallback content for your component. Inside the slot, you can specify your fallback like so.
[00:01:24] And then if the component is created without any content, Then we'll use that fallback markup instead. A component can contain multiple slots. The one that we just saw is the so called default slot. But you might have content that needs to be injected in a particular place inside a component.
[00:01:48] And for that we use something called a named slot. So this is a contact call component that looks like this. We have three slots, one inside this h2, one inside the address, and one inside the email. And we just need to provide names for all of those things.
[00:02:12] The name of the first slot will be name. The name of the second slot will be address. The name of the third slot will be email. And then now if we're using that component in another component, we can put in our contact details. And provide the slot name as the slot attribute on the element and it will get put in the correct place.
[00:02:44] So, slot = "name". Again, if we don't provide any content for a particular slot like we haven't provided the slot equals email. Then it will use the fallback content specified in the child component. In some situations, you're going to need to pass data from the child component back to the parent.
[00:03:31] So that it can be rendered inside the components content. Here we have a hoverable component that looks like this. And what we want to do is tell the contents of the horizontal component, whether or not we're currently hovering on it. So, it needs to pass the data from the slot to the contents.
[00:03:52] The contents look like this. So inside Hoverable.svelte, we're going to add hovering=[hovering]. Or we can just do that. And then inside our app, we're going to expose that using the let directive, let.hovering=[hovering]. And now if you hover over this component, it will tell it that it's being hovered upon.
[00:04:32] And we can change the name of this variable, we can change that to, for example, active and then get rid of that. If active, I'm being hovered upon. And this is scope, this let value is scoped to the contents of the component. It won't escape that, so we can have multiple of these like so.
[00:04:59] And the value will only be applied to the affected component, none of its siblings.