HTML Slot - A step by step on how to create a Template Placeholder

Name

Slots are identified by their name attribute

A named slot that you will find in a template

<slot name="value"><p>None</p></slot>

Template

The template is an HTML element that is not rendered by any browser.

The user defined / custom element uses this template to replace its own content.

This template defines:

• a style
• a heading
• and a slot (the content of this slot is defined inside the custom element).

<template id="template-id">
    <style>
      p {
        color: white;
        background-color: #666;
        padding: 5px;
      }
    </style>
    <h2>Template with Slot</h2>
    <p>
       <slot name="slot-id">Slot location definition (will be replaced)</slot>
    </p>
</template>

Light DOM

light DOM is a term that defines all custom element (ie not built-in HTML element from the specification).

custom element are elements that the developer instantiate programmatically via Javascript and defines the construction in the DOM. (later in this doc at the javascript section)

In this example, we add:

• the custom element
• with the tag name our-custom-element
• twice

• A first custom element that defines the slot to be a span element (it will replace the slot slot-id in the template)

<our-custom-element>
  <span slot="slot-id">First span slot element definition</span>
</our-custom-element>

• A second custom element that defines the slot to be a ul element (and its children) - (they will replace the slot slot-id in the template)

<our-custom-element>
    <ul slot="slot-id">
      <li>Second custom element slot</li>
      <li>Defined as list</li>
    </ul>
</our-custom-element>

Custom Element Definition

Via the customElement library, we declare that:

• the tag: our-custom-element
• is an HTML element
• and the constructor contains the construction logic.

customElements.define('our-custom-element',
  class extends HTMLElement {
    constructor() {
      super();

      // When the tag `custom-element` is found
      // select the template, get its content
      const template = document.getElementById('template-id');
      const templateContent = template.content;

     // append as a child of the `custom-element` tag the template
      this.attachShadow({mode: 'open'}).appendChild(
        templateContent.cloneNode(true)
      );
    }
  }
);

Observability

With Javascript, you can gain extra information on the template replacement with:

• the slot
• and assignedSlot attributes

const slottedSpan = document.querySelector('our-custom-element span');
console.log("Assigned/Replaced Slot Element: "+slottedSpan.assignedSlot.outerHTML);
console.log("Slot: "+slottedSpan.slot);

Result