TL;DR: There is a difference between named and unnamed slots. The Default slot (consistently labelled as defaultSlot in the API documentation is actually an unnamed slot.
In this post, I go over the differences...
Named Slots
In the Now Experience® Components API documentation, you will see mention of Slots - like this from the now-card-header component:
Here’s some sample code for using the defined Slots
And here’s what that code would look like rendered in the browser:
- You can use a standard HTML component like a <div>
- Sometimes, it may be appropriate to slot in another Now component, like the <now-icon> shown above.
The order does not matter. I could have reversed the order and had the <now-icon> line of code first, followed by the <div> and the result would look the same. They are named slots and they have a specific and reserved spot in the component.
Default Slot
Some components, like now-modal will have a default slot:
I’m a developer and like many developers, I thrive on recognizing patterns.
So I thought that this is how I would define the code for the default slot:
But when I did that, I found that my modal window was actually (sadly) empty:
That is because defaultSlot is NOT actually the name of the slot.
Instead, having this code would result in a more successful component:
Here’s the result:
There is a significant difference...
There is a difference between named and unnamed slots.
If we look at the now-card-header component source code, we’ll see that the slot is named:
If we compare that to the now-modal component source code, we’ll see that the slot is unnamed:
The documentation on the Developer site has a bit more information on slots.
It’s also good to know that slots are not a ServceNow specific construct. So, if you are interested in learning more in depth, there are tons of existing resources out there that cover the slot construct in more detail. Let your favorite search engine be your friend.
I hope this post has been helpful for those of you new to component development like I am.
My other posts on Now UI Experience Framework development:
