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

Extending dropin-in components

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?
  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

Overloaded term in web development. Everything is a component. It’s components all the way down. This is why we need to be specific about what kind of component we are talking about. For example, from top-to-bottom, big-to-small, a drop-in component can contain multiple container components that can contain multiple slot components that can contain multiple UI components.