Slots
Using slots provides the deepest level of customization. Slots are built-in extension points in the dropin. A slot provides a place in the dropin 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
prependSibling: A function to prepend a new HTML element before the slot’s content.prependChild: A function to prepend a new HTML element to the slot’s content.replaceWith: A function to replace the slot’s content with a new HTML element.appendChild: A function to append a new HTML element to the slot’s content.appendSibling: A function to append a new HTML element after the slot’s content.getSlotElement: A function to get a slot element.onChange: A function to listen to changes in the slot’s context.dictionary: JSON Object for the current locale. If the locale changes, thedictionaryvalues 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 dropin’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 dropin component can contain multiple container components that can contain multiple slot components that can contain multiple UI components.