Skip to content
Adobe Commerce Storefront
Docs Playgrounds Videos
Drop-in components

Understanding slots

Using slots provides the deepest level of customization. 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 it works.

Big Picture

What is a slot?
What is a slot?

The following functions are available to all slots:

  1. prependSibling: A function to prepend a new HTML element before the slot’s content.
  2. prependChild: A function to prepend a new HTML element to the slot’s content.
  3. replaceWith: A function to replace the slot’s content with a new HTML element.
  4. appendChild: A function to append a new HTML element to the slot’s content.
  5. appendSibling: A function to append a new HTML element after the slot’s content.
  6. getSlotElement: A function to get a slot element.
  7. onChange: A function to listen to changes in the slot’s context.
  8. dictionary: JSON Object for the current locale. If the locale changes, the dictionary values change to reflect the values for the selected language.

Vocabulary

Container

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

Component that provides placeholders to add other components. You can use a drop-in component’s built-in slots 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’s why we need to be specific about the kind of component we are talking about. Here’s a few examples of components from top-to-bottom: a drop-in component can contain multiple container components that can contain multiple slot components that can contain multiple UI components.