Put Content Inside a Component

A slot is a place where the parent can insert content. For example, a panel can provide its border and spacing while each View chooses its heading and body.

Use slots for icons and nested components. For a plain heading, label or body string, prefer text props, including localized values. A text prop does not need a matching named slot.

Add a slot to the panel's template:

<div class="panel">
  <slot name="header">Default heading</slot>
  <slot />
</div>

In a View, import your Panel, Heading, and Body components, then place them:

<Panel>
  <Heading slot="header" />
  <Body />
</Panel>

Heading goes into the named header slot. Body goes into the unnamed slot. If no header content is supplied, the panel shows Default heading. Studio can add the imports when you drag components into the source.

Inserted content uses the parent's values and styles. The panel's scoped CSS styles its own elements; it does not become the owner of the inserted Heading or Body. Style those components in their own files.

To try different slot content without changing a View, use Preview-only slots.