HTML is a tree-like structure in that nodes often have child content. This child content may be text, other HTML elements, etc.

Palette handles child content the same way that any other native Web Component does: through the browser's <slot> system:

<!-- Our Palette Template -->
<div class="my-component">
  <slot></slot>
</div>
Copy

If the above Template is used with a component called children-demo, we could then use the following structure:

<children-demo>
  <p>Hello, world!</p>
</children-demo>
Copy

Which would ultimately render out to:

<div class="my-component">
  <p>Hello, world!</p>
</div>
Copy

Slots

Slots are a native browser feature that allow for specifying content to render in a location within your component, or a "slot."

Often, you'll just want to display child content underneath a component. For such cases, you can simply use <slot></slot> as the placeholder for where the child content should go.

However, named slots allow for specifying multiple places where child content should go:

<div class="user-profile">
  <h2><slot name="nametag">Some Default Slot Content</slot></h2>
  <div class="bio">
    <slot name="bio"></slot>
  </div>
  <slot></slot>
</div>
Copy

We've got three slots here: One named nametag, one named bio, and an unnamed tag.

If this is a template for our children-demo component, we could then use it as such:

<children-demo>
  <span slot="nametag">Some username!</span>

  <p slot="bio">This user has a storied history...</p>

  <p>And this would go in the unnamed slot</p>
</children-demo>
Copy

We can map elements to slots by setting (or omitting!) the slot attribute on standard HTML elements placed as children under our component.