HTML - Slot (Template Placeholder)

About

Slots allows to define placeholders in an HTML template

The technology Template, Shadow DOM and custom element are known under the term web components

Glossary

Status Description
Slotable The element that should be inserted in a slot
Sloted The element has been inserted in a slot

Properties

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>

A step by step Example

This example defines:

  • a custom element
  • that will be replaced at runtime by a template that contains a slot.

There is three sections:

  • the definition of the html template and the slot location
  • the addition of the html custom element and the slot content
  • the javascript part that executes and replaces the custom element by the template.

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:

  • 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:

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

Rendering

<slot>s do not move the user's light DOM (The HTML written by the user). When nodes are distributed into a <slot>, the <slot> renders their DOM but the nodes physically stay put.

Documentation / Reference


Powered by ComboStrap