Instructor: When we try and pass content into our app, add it just in here inside the JSX, I'll have an h2. I'll just say, "Where did I go?" When I hit save, you'll notice that "Where did I go?" simply does not show up.
That's because in our template, we need to create a place for that to land. Right now, the root's in h1. I'm going to wrap this with a div. Now, the root is a div. Then I can tell that content to land right here, by saying slot. You can see "Where did I go?" is right there.
Back in our index, I'm going to add a class here of text, orange, just to make it stand out a bit more. Then I configure my slots. Let's says that this has a name of footer. Then I'll have one above it which is a slot with a name of header.
Now, "Where did I go?" will disappear again, but now, I can tell it here that I want it to show up in the header, so above, or in the footer, which is now below. If I create an h3, I'll call this footer. I'll call this header. I'll place the header in the header slot, place the footer in the footer slot, with a class of text, green.
Hit save, and you can see we have a header and a footer where the slot names simply match up with the names here that tell them where to go.