How slots are used with JavaScript

The <slot> element from HTML is an essential part of developing web components. According to MDN Web Docs, it acts as "a placeholder inside a web component that you can fill with your own markup." Essentially it allows you to pass in HTML content into the shadowroot.

How is it used?

One way to use slots is through a web component as a card, which will contain a header and body. It is in the body section where support for any and/or all HTML content will have to account for when designing.

Usage

The way a slot can be implemented is by using a generic <span> container in your HTML file. This can be blank to be content agnostic, or if named the slot attribute will have to be passed in, such as <span slot="slime-slot">.

An example of how slots can be rendered from a JavaScript file is a follows:

render() {
  return html`
  <h1>h1</h1>
  <div class="slot-container">
    <slot name="content"></slot>
    <slot></slot>
  </div>
  `;
}