Slots

Slots allow you to pass content into a component.

Legacy Components
You are reading the legacy components documentation. Please refer to the new documentation for the latest components.

Let's add a <slot> tag to our component called my-first-component. <slot> tags are placeholders for content.

<component>
  <slot></slot>
</component>

<html>
  <body>
    A simple email
    <my-first-component
      >This text will go wherever my slot tag is in the
      component</my-first-component
    >
  </body>
</html>

The email source is now:

<html>
  <body>
    A simple email This text will go wherever my slot tag is in the component
  </body>
</html>

Slots can also contain default values.

<component>
  <slot>Anything in here will show up if no other value is provided</slot>
</component>

A component can contain multiple <slot> tags. If unnamed, each tag will be replaced with the same content.

<component>
  <slot>Anything in here will show up if no other value is provided</slot>
  <slot
    >This second slot tag will be filled with this default text if no other
    value is provided</slot
  >
  <slot></slot>
</component>

Named Slots

To use multiple slots with different values, provide a name for each.

<fieldset>
  <input name="myfirstslot" type="slot" />
  <input name="mysecondslot" type="slot" />
</fieldset>

<component>
  <slot name="myfirstslot">A default value</slot>
  <slot name="mysecondslot"></slot>
</component>

<html>
  <body>
    A simple email
    <my-first-component>
      <fragment slot="myfirstslot"
        >This text will go wherever my first slot tag is in the
        component</fragment
      >
      <fragment slot="mysecondslot"
        >This will replace the second slot.</fragment
      >
    </my-first-component>
  </body>
</html>

Slots can contain regular HTML and CSS as well as plain text.

Previous ArticleNext Article