Current section: Slots 30 exercises
solution

Generic Slot Components

Loading solution

Transcript

00:00 Let's delete the variable and let's switch this for a regular label right there and remove the ID. Now, with those changes done, then clicking on the label no longer works because these are not properly associated.

00:16 If I click on this, we have the label, has the slot label, but there's no provider for that label. So we need to provide a label slot, some slot information for that.

00:28 So let's go into toggle and we're going to add an ID to our toggle value here because we need to pass that along to the switch. So we're going to say ID is a string, and then we're going to accept an optional ID

00:45 so the ID can be overridden, always a useful feature. So this is an optional string and we've got to do that correctly. Hold on a second. For a second, I forgot how to write TypeScript. And then if we look at the text field, we're going to do something similar here.

01:03 We're going to say, hey, I'm going to generate an ID and if no ID is provided, then we'll fall back to the generated one. And so now we have an ID that is generated if there's no ID provided. Now we're going to create our slots object and all we need is the label one.

01:21 So slots, label, and HTML for ID. Super. And then with this, it's complaining because we're not providing the ID. So let's provide that ID. And then we also need to render our slot context.

01:38 So slot context. Right there. And our slots or our value will be slots. There we go. And now with that, our use toggle is now exposing the ID as well.

01:56 And so we can pass that ID right along here. ID. And because we have a label slot, then our label component should consume that. And it totally does. It works. Let's party. Set town. Let's party. Set town.

02:13 And our label component is also rendering the label slot so that we can style that if we want to. And our button has the ID and that's why it's associated properly. And this is still associated. And that is the cool thing about this pattern is that we're using the same component for

02:30 these two different compound components, which I think is pretty sweet. We could actually take this a little further. Maybe let's do in the next step of the exercise.