When creating a composed component, you might want to allow that component to accept a component(s) as a child to be inserted into the component at a specified slot in the composition tree.

Card component

Card component

For example, let's look at the Card component. Its composition includes several nested boxes, an image, and some typography. Now we want a user to be able to add either an image, SVG, or an icon in the place where the image is located, but we want it to be accessible out of the composition but render in the same place.

If we select the components Component Configuration menu, we will have a modal with an option to add Slots.

Component Configuration Menu with Slots highlighted

Component Configuration Menu with Slots highlighted

After selecting the + icon I named the slot media.

named slot

named slot

I can now move my media slot to where I want it to render in my tree, in this case, where the image component is located. The image has also been removed, as we will add it to our new media slot outside the composition.

slot moved to the location of the render

slot moved to the location of the render

Select the x on the Card component to close the composition. Now we see the media slot in the tree as a child to the Card component.

Slot in the composition tree as a child to the Card component

Slot in the composition tree as a child to the Card component

Insert the Image or your media of choice, and it will now render in your components composition where you placed the slot.

📘

Slot Notes

Slots are created on the component configuration.
They are not associated directly with a property in the UI.
They support passing vars down.