Slots

Using Slots

Slots allow your component to expose locations that can receive arbitrary html. This is very useful to expose portions of your component to be built into.

Default Slot

Using the syntax {>slot} without a name will create a default slot which will allow all html nested inside a web component to be slotted.

{> slot}

<my-component>
  <p>This content is slotted</p>
</my-component>

Named Slot

Named slots allow content that is specified with same name for slot to be slotted when a component is used.

Template

<div class="card">
  <div class="header">
    {> slot name="header"}
  </div>
  <div class="content">
    {> slot name="content"}
  </div>
</div>

HTML

<ui-card>
  <div slot="header">Johnny Montana</div>
  <div slot="content">
    <p>Johnny was a cowboy, the best we ever had.</p>
    <p>He rode through the wilderness day and night.</p>
  </div>
</ui-card>

Slots vs Settings

Depending on your use case you might consider using a slot or a setting which is passed through using an html attribute or property.

Both allow you to pass simple string contents into your component however there are advantages and drawbacks to each approach

Server Side Rendering with Slots Slotted content can make achieving full server side rendering more difficult unless you are cautious of how you access slotted content from inside your component. For more information see our dedicated section on server side rendering.

Settings

Pros

• Components have access to the value of settings meaning they can provide alternative content if the values are empty.
• settings are defined on the server, which means they can be rendered using SSR

Cons

• May not be as SEO friendly for web crawlers
• Passing through HTML requires serializing data and properly handling script injection
• Requires defining part to expose them to the component

Slots

Pros

• Slots allow nested html to be passed through to a component
• Slots are easy to style from page css without part syntax

Cons

• Slotted content is not available in a template data context, meaning they cant be used for expressions like conditionals. i.e. {#if slottedContent}
• Slotted content is unavailable during server side rendering
• Slotted content is harder to style from inside a component ::slotted pseudo selector does not work with other css selectors like :first-child