Slots and Placements
A slot is a named mount point. <ExperienceSlot name="page" /> renders every
experience that points at that slot and whose condition matches.
What a slot is
The name of a slot points at the .picked-slot-<name> selector. So
<ExperienceSlot name="page" /> renders every experience with the target selector
.picked-slot-page, when the condition of that experience is active.
The slot reads the active state of each experience from the seeded snapshot. It therefore renders at once, both in server-side rendering and at the first paint of the hydration.
<ExperienceSlot name="page" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | The name of the slot. It points at the .picked-slot-<name> selector. |
open | 'rule' | 'rendered' | 'rule' | What an experience does when its initializeOpen is empty. 'rule' keeps it closed. 'rendered' opens it. A boolean or a rule in initializeOpen has the same result with both values. |
wrap | boolean | false | Puts the output of each experience in a wrapper element. See The wrapper. |
The slot reads open when it mounts an experience.
Point an experience at a slot
Set the target selector of the experience to .picked-slot-<name>. An experience
that points at .picked-slot-page renders into <ExperienceSlot name="page" />. The
name of the slot and the end of the selector must match.
Placement order
When more than one experience points at the same slot, they render in this placement order:
replace -> before -> prepend -> append -> after
replace wins. An active experience with the replace placement renders alone, and
it replaces every other match in the slot. In every other case each active experience
renders, in placement order.
More than one experience in one slot
The slot collects each experience that points at its selector. It drops each one
whose condition is not active. It then sorts the rest into placement order. When a replace
experience is among the active ones, only that experience renders. With no active
replace, the slot renders every active experience in the order before, prepend,
append, after.
One Page can therefore take a whole slot with replace, while another slot holds
several experiences that use the other placements. A condition decides which
experiences are active. See Conditions.
Lifecycle events
The slot sends these events on the event bus of the client for each experience that it renders. It sends them only in the browser, and only after the client is ready. The server render sends no events.
| Bus event | When it fires | Analytics event |
|---|---|---|
experience_initialize | The slot mounts the experience. | experience_load |
experience_open | The experience opens. open and initializeOpen decide this. | app_open |
step_enter | The flow of an open experience arrives at a step. | step_enter |
experience_unmount | The slot stops rendering the experience. | None |
When the slot stops rendering an experience, the open state of that experience does not
change. The slot therefore sends no experience_close, and the analytics plugin sends no
app_close. After that, the experience sends no events, and its flow stops.
Each time that the slot mounts an experience, the experience starts closed, and open and
initializeOpen decide again if it opens. This is also true when the slot mounts the same
experience again, for example after a React <Activity> shows it again.
The flow of an experience continues from its history. When the history of an experience
already ends at a step, the experience opens at that step and the slot sends no
step_enter for it.
Each analytics event has the page URL at the time that the event fires.
The wrapper
With wrap, the slot puts the output of each experience in one element:
<div data-picked-experience-id="<experience id>" style="display: contents">
<!-- the experience -->
</div>The element has no box of its own, so the layout does not change. The element is in the
document tree, so the selectors >, :first-child, and :nth-child() see it. The
data-picked-experience-id attribute holds the ID of the experience. It is the same on the
server and in the browser.
Without wrap, the slot adds no element.
Related
- About server-side rendering — why placements have an order.