Slots

The <slot> element is a fundamental part of toddle's Component specification. As many other core concepts in toddle, slots build upon native web standards: Read more on the underlying Web Components Slots specification.

Tip: When exporting a component as a web-component, you can use your <slot> as you would any other web-component. You can insert anything, for example a React component into a slot on your toddle web component just by defining attribute `slot="my-slot"`!

Adding a slot

You can add a slot to your element tree by using the element catalog . Slots can be added to all components, but not pages.

Naming

Named Slot : A <slot> with a "name" attribute allows selective insertion of content. You will have to select which slot an element should be assigned to by picking it from the attributes tab.

Default Slot : A slot without a name will catch all elements that do not have a specific name selected in their attributes.

Reusability and encapsulation

Components are entirely encapsulated. This is great as you are guaranteed that your component always behaves and looks the same. However, sometimes you may want certain parts of your component to be modified based on it's use-case. The <slot> element acts as a placeholder inside a component's element tree for content that is defined outside of the component. This can make for truly dynamic components. For example, in toddle ✨ we use slots for our dialog component (see image above)

Certain parts of the dialog are fixed, such as the backdrop, the dialog container, and the buttons, but you can insert anything you like into the content area.

Placeholder content

You may have noticed that a <slot> element may contain elements itself. These will be shown by default, as a type of placeholder. It is only when an element with a corresponding `slot` attribute with the slot's name is given, that the content is replaced.

Use cases

Slots should be used sparingly, but are extremely powerful when used well. They play a crucial role in creating reusable and encapsulated components. Slots enable you to move almost anything to their components and enable an incredible level of composition to your components.

In toddle (toddle is built in toddle) we use slots for a multitude of cases. Any time we need to add a right-click menu, we use our own `context-menu` component with two slots (" Content ", & " Default "). We can then add whatever content we like in the `Default` slot, and whenever it is clicked, `Content` is shown in a context menu. We do the same for `toddle-tooltip`, `dialog`, and many others.