HTML slot Global Attribute

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

Description

The slot attribute is a global HTML attribute used primarily in conjunction with Web Components and the Shadow DOM. It allows developers to define and assign elements to named insertion points within a shadow tree, making it possible to create more modular and reusable components with customizable content.

Purpose

The slot attribute tells a shadow DOM which content should be inserted into which slot inside a custom element. It essentially links an element in the light DOM (regular DOM) to a placeholder in the shadow DOM, enabling developers to control where content appears in a component.

Usage

The slot attribute is placed on an element in the light DOM to specify which named slot in the shadow DOM it should be projected into. If no slot name is provided, the element will be placed into the default slot.

Examples

1. Default Slot

If the slot attribute is not specified, the content is inserted into the unnamed default slot:

<!-- Light DOM -->
<my-card>
  <p>This text will appear in the default slot.</p>
</my-card>

<!-- Shadow DOM -->
<template id="my-card-template">
  <div class="card">
    <slot></slot> <!-- default slot -->
  </div>
</template>

Result: The <p> element from the light DOM will appear inside the <slot> in the shadow DOM.

2. Named Slots

Named slots allow you to place specific content in different parts of the shadow DOM:

<!-- Light DOM -->
<my-card>
  <h1 slot="title">Card Title</h1>
  <p slot="content">This is the card content.</p>
</my-card>

<!-- Shadow DOM -->
<template id="my-card-template">
  <div class="card">
    <header><slot name="title"></slot></header>
    <main><slot name="content"></slot></main>
  </div>
</template>

Result:

<h1> appears in the <header> slot.
<p> appears in the <main> slot.

Key Points

Global attribute: Can technically be added to any HTML element, but it is meaningful only in the context of shadow DOM and slots.
Default behavior: Elements without a slot attribute are projected into unnamed slots.
Named slots: Allow precise control of content placement in complex web components.
Reusability: Helps make custom elements modular and flexible, allowing developers to inject arbitrary content without modifying the component itself.

Syntax

<element slot="name">

Values

nameOptional string that corresponds to the name of a <slot> element in the shadow DOM.

Example

HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Slot Example</title>

  <style>

    my-card {

      display: block;

      margin: 1rem;

      border: 2px solid #333;

      border-radius: 8px;

      width: 300px;

    }



    .card {

      padding: 1rem;

      background-color: #f0f0f0;

    }



    header {

      font-weight: bold;

      font-size: 1.2rem;

      margin-bottom: 0.5rem;

    }



    main {

      font-size: 1rem;

    }



    footer {

      font-size: 0.8rem;

      text-align: right;

      margin-top: 1rem;

      color: #666;

    }

  </style>

</head>

<body>



<my-card>

  <h1 slot="title">My Card Title</h1>

  <p slot="content">This is the main content of the card. You can put any HTML here.</p>

  <p slot="footer">Footer content goes here.</p>

</my-card>



<script>

  class MyCard extends HTMLElement {

    constructor() {

      super();

      const shadow = this.attachShadow({ mode: 'open' });



      const wrapper = document.createElement('div');

      wrapper.classList.add('card');



      // Using named slots

      wrapper.innerHTML = `

        <header><slot name="title">Default Title</slot></header>

        <main><slot name="content">Default Content</slot></main>

        <footer><slot name="footer">Default Footer</slot></footer>

      `;



      shadow.appendChild(wrapper);

    }

  }



  customElements.define('my-card', MyCard);

</script>



</body>

</html>

Result

Editor

Browser Support

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