Slots

Slots allow you to pass content into a component.

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