Slots, Slots, Slots, Everybody!

You ready to talk about slots, slots, slots, everybody? I'm Abbe, a former React developer, and when I started learning Vue, I was like, what the heck are slots? Slots turn components into wrappers that enhance your dynamic content. So instead of having to decide exactly what your component is going to do when you write it and isn't allowed to do anything else, you can use a slot to create a little placeholder and pass whatever content to that however you want.

We're going to start with the web component spec and then how React, Vue, and Angular leveraged that spec to use slots in the frameworks. All of this information will be available to you after the talk is over, so you don't have to remember any of the implementation. Just think about how to use slots.

We're going to start with web components. They're part of the HTML spec. Everything I'm about to show you is available in your browser with JavaScript and HTML right now. First, we need a template tag and a slot tag. In my HTML file, I have a template tag with an ID. It's got some styling in it, and then inside a div container, a handful of slots. This first slot is a default slot. It doesn't have a name. The second slot is using the name attribute with the value title to name the slot title. Inside it is default content. This is what we'll show if we don't pass anything to the slot. This slot is wrapped in an H2 or heading element. Anything I pass to that slot will be wrapped in a heading element. Inside this next slot named content, I have a paragraph tag. Whatever I pass to that slot will overwrite the paragraph tag. Next, we need a custom element with the shadow DOM. I'm using the custom elements API to define a component called shots component. Then I'm passing the class name shots to it. This is extending HTML element, so we get all the goodies you get with a basic HTML element. Then I'm inside the constructor. I'm grabbing the template tag by the ID, creating a shadow DOM, which is just an encapsulated little DOM inside your regular DOM. Inside that shadow DOM, I'm appending a copy of all the content inside that template tag, and I'm adding a class to make it easier to style. I'm going to call the component. I'm going to use this name that I passed to the definition method. At the top of my HTML file, I have shots component.

All the content I want to pass to it is currently commented out. I'm not passing anything into it, and we should see the default content. We should see Sad Little John because there are no shots, and we do. As you can see, the template tag is mounted, but that's not what's being displayed on the page. That's our shots component call. Inside the template tag is a document fragment, and inside that document fragment is all of the content that was in that template tag in our HTML file. Inside the component is a shadow root with all of the content that was inside the template tag.

Next, let's use a slot attribute to pass some content to our slots. This first element has a slot attribute with the value title, so this content should go in the slot named title. Same for the rest of the named slots, but this last one doesn't have the slot attribute on it. All of its content will go into the default slot. Even though I'm passing it at the bottom, the default slot is at the top, so I expect to see shots, shots, shots above Happy Little John because we have shots now, and we do. Inside my component now that I'm passing some content, there are slot buttons.

Pressing this button will take me to the slot that that content is being put in, and if I expand the slot, then I get a reveal button that takes me back to the slot that it's being passed to. So, we talked about the slot and the reveal button. We saw the template tag is mounted. It has a document fragment in it. The template tag itself is not displayed. There's a shadow root, and inside it, the slot tags are mounted, and now we need to talk about how the shadow DOM affects CSS.

So, you may have noticed that Happy Little John is a little bit bigger than Sad Little John. This is because he's getting a 500 pixel width declaration from my style sheet. Content I pass outside of the template tag has access to or is affected by my style sheet. What happens if I comment that out and import my style sheet at the top of my template tag? We'll still get small Sad Little John because he's still getting the 300 pixel declaration from my style tag here, which is more specific than the import statement.

If I comment that out, then we get big Sad Little John. This highlights a significant issue with how the web component spec was implemented. Other frameworks like React, Vue, and Angular handle slots differently. React doesn't use slots; instead, it utilizes the children prop to pass HTML or JSX content to components. Vue and Angular, on the other hand, extend the web component spec, implementing slots. They avoid cluttering the DOM with slot and template tags.

Vue provides a comprehensive slots guide, starting with default slots. Within Vue, default slots are utilized by creating a default slot within a component. Using default slots, content like Confuse Little John can be placed in the club. Named slots in Vue involve defining slots with specific names, such as window and wall. By incorporating default and named slots, complex content organization within components is achievable. Accessing named slots in Vue involves using the template tag and the pound sign followed by the slot's name.

Let's start with how to use default slots. So, I have the slots default component, and inside the component, I have a default slot. It doesn't have a name. Around the default slot, I have an image of a window and an image of a wall, and my default content for this default slot is Confuse Little John. He is confused because there are no people in the club. So, let's put some people in the club for him.

Exactly like we did with web components, I'm just going to pass some content as a child of my component, and that's going to end up in the default slot. We're going to have people in the club. Just like web components, you can also use named slots and default and named slots together. So, let's start with my default content. My named slots component has a slot named window and a slot named wall, and this time instead of an image, the default content is text.

Inside our default slot, we have the same Confuse Little John, but he's extra confused now because there's not even a club. Let's give him a club. We access named slots in Vue by using the template tag and the Octavethorper hash or pound sign and the name of the slot. So, this time I'm going to pass the window and the wall directly to those named slots. Little John is still a little confused, but we can get him people for his club. Despite passing the people outside of the club, we know the default slot is in between the window and the wall, so the people will end up inside the club.

So, despite the fact that I'm passing the people outside of the club, we know the default slot is in between the window and the wall, so the people will end up inside the club. You also have the option to use the naming syntax with a default slot, and its name will be default. So, this will look exactly the same as not wrapping that content in a template tag and using the default. It does.

We can also create a conditional slot. Here I'm calling my slots conditional component and using the template tag and the naming syntax and the vif directive. The vif directive says if you pass something to me and evaluate it to true, I will mount this element and all of its children. If it evaluates to false, I will not mount this element or any of its children. Right now, I have it hardcoded to false, so we know nothing is going to be mounted. Nothing is being passed to the slot.

On the div, I'm also using the vif directive. Don't use it on the slot. Use it on a wrapper. I'm accessing the slots attribute and specifically what's happening with the club slot. This is saying if something is being passed to the club slot, then mount everything. If nothing is being passed to the club slot, don't mount anything. If there are people in the club, I don't even want the club. Right now, we aren't passing people, so I should see a blank page, which I do. If I hardcode this to true, we're then passing people, so we should get people and the club, which we do.

You said, that's great, love that, but what if you could access content passed to your slot in the parent component when you use that slot? I've got a slots scoped component, and I'm using the vslot directive to access slot props. What are slot props? Props passed to your slots. I have a default slot here, and it's getting two props, number and message. Number comes from my logic up here. It's a shot count. Message is a message that changes based on the shot count.

I also have a function that increments up the shot count, which is hooked up to the button. If I wasn't passing anything to this component, I would only see the button. But in my parent component, I'm accessing slot props, and then accessing the props as properties of slot props. I should have three rows of text and a button that increments up the number of shots. When you hit five, you're cut off, put your hands in the air, you don't need any more shots. When you use scoped default slots, you have to use the naming syntax.

Now I'm going to wrap a slot that is a default slot in a heading, and I'm going to pass the number to it. It's going to get the shot count. Then I have a slot named display that's getting the prop message. Basically, Vue needs to know which slot you're accessing, so it knows which props you have access to. We can also use the naming syntax to access slot props. We don't have to use the Vslot directive on the component. We can use it on the template tag and access the prop as a property of slot props. I should have two rows of text and the button this time, and I do. Works exactly the same.

I'm not going to show you the example again, because this will work exactly the same as the last two times. You don't have to access props as a property of slot props. You can use JavaScript destructuring to access them. If you're like me, you might prefer this, or when you have nested objects, it cuts down on one object dot part. Putting this all together, we can solve a problem that I had very often in React. When you get an array and you want to display it on the page, you have to use a map to create all the JSX. It's a little bit different every time, so you can't always write the same thing. With Vue and slots, we can create a dynamic list component whose sole job is to iterate through a list and display it on the page.

We get to decide all the specifics in the parent component when we're using the slot. My dynamic list component is taking in an array and mounting an unordered list on the page. On a list item, I have the v4 directive, which creates an iterator for every item in the array. It will create a list element. It will grab a key from within that object that I'm displaying on the page. It has a slot named item. I'm passing each item in the array as a prop to each slot. In the parent component, I define the array, which is a list of shots the bar might have.

Then I decide how I want to display it. I use my template tag and the naming syntax to access that item. Then I decide which properties I want to display and how, and do all the styling in the parent component. So, we should get a beautiful list of shots. You can also do kind of the opposite where you don't render any elements and only have logic and then pass that logic to a slot. I've seen this referred to as higher order components as well as smart dump component architecture, and there's a whole guide on how to do it because now we have to talk about Angular. Angular has slots, but it's called content projection. It's based on the slot element, and you use the ng-content tag instead. So, close this bad boy. And we have a default content projection component. Within it, I have a default slot, or ng-content tag. Same example. Confused little John would be in the club if there were no people, but we're already passing people, so we should get people in the club.

Confused little John would be in the club if there were no people, but we're already passing people, so we should get people in the club. But, we don't just use default slots. We can also use name slots. And Angular said, yes, and. There are so many ways to name a slot. Right now, I have a tag called the window that will pass this content to a slot. And to do that, I created two little components with ng-content tags. And so, that should look the same. We should have people in the club.

But, you don't have to use a tag when you go to use a name slot in Angular. You can use the ng-project as attribute on any element. And it will match the select attribute that is on the slot. So, right now, I have a string, the window, and a string, the wall, and that's being matched by the ng-project as attribute. So, even though people are being passed outside the club, the default slot is in between the window and the wall, so the people should end up in the club, which they do.

But, that's not the only thing that the ng-project as attribute can do. It can use any CSS selector. Any CSS selector. So, we're going to start with a class. And first, this is going to cause chaos because I haven't updated my select. It's still a string. So, we're going to get the default content. We're going to get what we were passing. And the people are outside the club. It's chaos. But, if I go ahead and change this to be a class selector instead and maybe hard reload, yes, we get people in the club.

I'm going to go ahead and take that back out because the next example is using this slot. This selector is using a CSS selector that says the title attribute should match select me. And in my parent component, I am passing a paragraph tag that has a title attribute with the value select me. So, even though we're passing it at the top, it should end up at the bottom, which it does.

If I didn't have that slot selector and it just randomly went into the default slot, then we'd have select me in the club with the people and we don't want that. No, no. Just like view, we can also do conditional content projection. But this uses the ng-template tag. It's based on the template element instead. So, this one's going to be a little bit more of a journey that we're going on together.

As a prop, I am passing the string for the source for my image to where I'm getting the people to put in the club. And I have my conditional content projection component. It's taking people in as a prop and creating refs to these ng-template tags. Right now I have a little john-ng-template and that I'm slotting right into an ng-container tag. So, I'm using the ng-template outlet attribute to grab that template tag and mount it inside this container. So, we should see people in the club. We should see a confused little john, which we do.

If we want to see people in the club, then we're going to use this ng-content container that is accessing the people in the club ref. This time I'm using a bound attribute so that I can pass some context to the container, which is the string of where to get the people to put in the club. Then I'm passing that as another bound attribute to my template tag, which then finally passes it to my image. So, we should see people in the club, which we do. I've created a component that does just that. Right now the prop showPeople is set to false.

If we go up here, I've got my same two ng-template tags and this time on ng-init, which is after I get all my props and everything, I say, hey, is showPeople true or false? Right now it's false, so we're taking a view container and creating an embedded view and passing the Lil Jon ng-template tag. This is going to do the exact same thing as having the ng-container tag and using the ng-template outlet attribute. We should see Confuse Lil Jon. If we want to see people in the club, then we set showPeople to true.

Now, view container createEmbeddedView will pass both the template tag and then people as context as well. There we go. But wait, there's more. Angular said, what if we allowed you to have a view encapsulation mode that's literally the Shadow DOM API? I have one final component called viewEncapsulationMode. When I define my component, I use the encapsulation property to select viewEncapsulationShadowDOM. We should see Lil Jon's graduation photo, or Lil Lil Jon, if you will, inside a shadow root exactly like we would have seen in web components. Here's his graduation photo and there it is inside a shadow root. Start thinking with slots.

Here's a QR code to get these slides. There's ways to contact me, all of the repos that I've been using as examples, and the blog with all of this information. Hope you have a great time using slots.