HTML <slot> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <slot> element in HTML is a placeholder inside a Web Component’s shadow DOM where external content can be inserted. It allows developers to create reusable and encapsulated components while giving users the ability to pass in their own markup or content dynamically. Essentially, it defines a “slot” in a component’s structure that can be filled by content provided by the component’s consumer.

When a web component contains a <slot> element, the browser looks for content that is placed between the opening and closing tags of that component in the light DOM. If content is provided, it will be rendered at the <slot> location. If no content is provided, the slot can optionally display fallback content, which is specified inside the <slot> element itself.

Slots can be named or unnamed. An unnamed slot serves as the default placeholder for any content that isn’t assigned to a named slot. Named slots allow the component consumer to target specific slots with their content, making the component highly flexible.

The <slot> element is a cornerstone of the Shadow DOM composition model, enabling a clean separation between component structure (shadow DOM) and content (light DOM), promoting modularity, maintainability, and reusability in web applications.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: Transparent
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<template id="element-details-template">

  <style>

    details {

      font-family: "Open Sans Light", Helvetica, Arial, sans-serif;

    }

    .name {

      font-weight: bold;

      color: #217ac0;

      font-size: 120%;

    }

    h4 {

      margin: 10px 0 -8px 0;

      background: #217ac0;

      color: white;

      padding: 2px 6px;

      border: 1px solid #cee9f9;

      border-radius: 4px;

    }

    .attributes {

      margin-left: 22px;

      font-size: 90%;

    }

    .attributes p {

      margin-left: 16px;

      font-style: italic;

    }

  </style>

  <details>

    <summary>

      <code class="name">

        &lt;<slot name="element-name">NEED NAME</slot>&gt;

      </code>

      <span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>

    </summary>

    <div class="attributes">

      <h4>Attributes</h4>

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

    </div>

  </details>

  <hr />

</template>

Attributes

name: The slot's name.

Global Attributes

The <slot> tag also supports the Global Attributes in HTML5

Event Attributes

None

Browser Support

The following information will show you the current browser support for the HTML <slot> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.