Overview
Source: ./src/documentation/development/working-with-slots.mdx
Working with slots
Slots allow you to pass custom HTML content to a component when the standard configuration options are not sufficient. This page explains how to use slots effectively and how to style slot content.
Skip to:
What are slots
Slots are a web component mechanism that lets you inject custom content into a component. Use slots for:
- Custom control elements, such as special buttons
- Structured content, such as carousel tiles or notification messages
- Interactive elements, such as inputs, checkboxes, or links
Components leverage the named slots mechanism of web components to distinguish different child contents for different configuration requirements.
Default slots
Content without a slot attribute is placed in the default slot.
Use the default slot for the primary content of a component.
<oc-example-v1>
<h3>Some headline</h3>
<p>Some text</p>
<a href="https://www.otto.de">OTTO</a>
</oc-example-v1>
Named slots
Use the slot attribute to place content in a specific named slot.
Named slots allow components to accept multiple types of content in designated areas.
<oc-banner-v1 type="hint" size="200" headline="Some Headline">
This is a default slot
<a
slot="actions"
target="_blank"
href="https://www.otto.de"
class="oc-link-v1 oc-link-v1--size-100 oc-link-v1--underlined"
>
Action 1
</a>
<a
slot="actions"
target="_blank"
href="https://www.otto.de"
class="oc-link-v1 oc-link-v1--size-100 oc-link-v1--underlined-bold"
>
Action 2
</a>
</oc-banner-v1>
In this example, the text "This is a default slot" goes into the default slot, while the two links are placed in the actions slot.
Style slot content
Style slot content directly using the ::part() pseudo-element selector.
This modern approach keeps your markup cleaner, with minor benefits for performance and memory usage.
By targeting slots with CSS, you avoid unnecessary wrapper elements, resulting in a leaner DOM.
How to style slots
- Use the
::part()pseudo-element selector in your CSS. - The input parameter for
::part()must always be the slot name exactly as defined by the component.
Style the default slot
Style the default slot of the oc-checkbox-v1 component to display its label as a flex container:
<oc-checkbox-v1 class="flex-label">
<div>Label left</div>
<div>Label right</div>
</oc-checkbox-v1>
<style>
.flex-label::part(default) {
display: flex;
justify-content: space-between;
}
</style>
Style a named slot
Style the named slot title of the oc-accordion-v1 component to change the color of the title text:
<oc-accordion-v1 class="highlight-heading">
<div slot="title">Accordion title</div>
</oc-accordion-v1>
<style>
.highlight-heading::part(title) {
color: #0057b8;
}
</style>
Changing the display property is a common use case, but you can apply any CSS property to slot content.