Slots

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

my-first-componentcomponent
<component>
<slot></slot>
</component>
my-emailemail
<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:

my-emailemail [output]
<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.

my-first-componentcomponent
<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.

my-first-componentcomponent
<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.

my-first-componentcomponent
<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>
my-emailemail
<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.