Skip to content
Adobe Commerce Storefront
Drop-ins

Slots

Using slots provides the deepest level of customization for drop-in components. Slots are built-in extension points in the drop-in. A slot provides a place in the drop-in component to add your own UI components and functions. This architecture makes it easy to change the default look, layout, and behavior. Let’s learn how slots work.

Vocabulary

Container

A component that manages or encapsulates other components. Containers handle logic, fetch data, manage state, and pass data to the UI components that are rendered on the screen.

Slot

A component that provides placeholders to add other components. You can use the built-in slots for a drop-in component to add or remove UI components and functions. Or you can add your own additional slots.

Component

In web development, this term is overused. That is why we need to be specific about the kind of component we are talking about. Here are a few examples of components from top to bottom: a drop-in component can contain multiple container components that can contain multiple slot components.

Big Picture

What is a slot?
What is a slot?

The following functions are available to all slots:

  1. prependSibling: Prepends a new HTML element before the content of the slot.
  2. prependChild: Prepends a new HTML element to the content of the slot.
  3. replaceWith: Replaces the content of the slot with a new HTML element.
  4. appendChild: Appends a new HTML element to the content of the slot.
  5. appendSibling: Appends a new HTML element after the content of the slot.
  6. remove: Removes the slot from the DOM.
  7. getSlotElement: Gets a slot element.
  8. onChange: Listens to changes in the context of the slot.
  9. dictionary: Provides a JSON Object for the current locale. If the locale changes, the dictionary values change to reflect the values for the selected language.

Best practice for dynamic slot content

Do not use context methods inside other context methods. Context methods include appendChild(), prependChild(), replaceWith(), appendSibling(), prependSibling(), remove(), getSlotElement(), and onChange().

Instead, create and append wrapper elements on mount, then update their content inside callbacks using standard DOM methods like innerHTML:

slots: {
  MySlot: (ctx) => {
    const wrapper = document.createElement('div');


    // Use context method on mount (outside other context methods)
    ctx.appendChild(wrapper);


    // Update content inside onChange using standard DOM methods
    ctx.onChange((next) => {
      if (next.data.condition) {
        wrapper.innerHTML = 'Content A';
      } else {
        wrapper.innerHTML = 'Content B';
      }
    });
  }
}
// ❌ Incorrect: Calling context method inside context method
ctx.onChange((next) => {
  const element = document.createElement('div');
  ctx.appendChild(element);  // Incorrect - context method inside context method
});