HTML <slot> Tag

The <slot> tag is a powerful feature of Web Components, acting as a placeholder within a custom element's shadow DOM. It allows developers to project content from the light DOM (the regular DOM where you write HTML) into specific areas inside the component's internal structure, defined within the shadow DOM. This enhances encapsulation and reusability of web components.

Syntax

<slot name="slotName">Fallback content</slot>

Attributes

Example

<my-component>
    <p>This is content for the default slot</p>
</my-component>

More Examples

Basic Usage with Default Slot

In this example, anything placed inside the <my-component> tags will be rendered inside the default <slot> in the shadow DOM of my-component.

<!-- HTML -->
<my-component>
    <h1>Hello from outside!</h1>
    <p>Some more content!</p>
</my-component>

<!-- JavaScript (Web Component Definition) -->
<script>
    class MyComponent extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({mode: 'open'});
            this.shadowRoot.innerHTML = `
                <style>
                    div { border: 1px solid blue; padding: 10px; }
                </style>
                <div>
                    <slot></slot>
                </div>
            `;
        }
    }
    customElements.define('my-component', MyComponent);
</script>

Explanation:

• The MyComponent is a simple web component that has a slot element within its shadow DOM.
• When we use <my-component>, any HTML content placed between the start and end tags will be projected into the <slot>.
• The fallback content will not be shown because the slot has been filled with external content.

Named Slots

Here, we use a named slot to provide more control over content projection.

<!-- HTML -->
<my-card>
    <h2 slot="title">Card Title</h2>
    <p slot="content">This is the main content of the card.</p>
    <button slot="footer">Click Me</button>
</my-card>

<!-- JavaScript (Web Component Definition) -->
<script>
class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .card { border: 1px solid black; padding: 15px; width: 300px; }
        .card-title { font-size: 1.5em; margin-bottom: 10px; }
        .card-footer { margin-top: 20px; text-align: right; }
      </style>
      <div class="card">
        <div class="card-title"><slot name="title">Default Title</slot></div>
        <div><slot name="content">Default content here</slot></div>
        <div class="card-footer"><slot name="footer">Default Footer</slot></div>
      </div>
    `;
  }
}
customElements.define('my-card', MyCard);
</script>

Explanation:

• The MyCard has three slots: title, content, and footer.
• We use the slot attribute on the elements within the <my-card> to specify where the content will project into the named slot with the matching name inside the custom element.

Fallback Content

If no content is provided for a slot, the fallback content defined inside the <slot> element will be displayed.

<!-- HTML -->
<my-component>
</my-component>

<!-- JavaScript (Web Component Definition) -->
<script>
    class MyComponent extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({mode: 'open'});
            this.shadowRoot.innerHTML = `
                <style>
                    div { border: 1px solid green; padding: 10px; }
                </style>
                <div>
                    <slot>This is the default slot content.</slot>
                </div>
            `;
        }
    }
    customElements.define('my-component', MyComponent);
</script>

Explanation:

• Since we have not provided any content within the my-component tags, the fallback content This is the default slot content. is displayed

Browser Support

The <slot> tag is supported in all modern browsers, including:

• Chrome
• Firefox
• Safari
• Edge
• Opera

For older browsers that do not support web components, consider using polyfills for full functionality.

Notes and Tips

• Encapsulation: Slots are essential for creating truly encapsulated components. They allow you to expose insertion points without exposing the internal structure.
• Flexibility: Slots enable component reusability by allowing you to inject different content into the same structure.
• Default Content: Provide meaningful default content to be displayed when no slotted content is available. This improves usability and indicates how the component should be used.
• Dynamic Slots: You can use JavaScript to manipulate slots and projected content dynamically, creating even more complex and interactive components.
• Best Practices: Name your slots descriptively, as it enhances readability for developers who use your custom components.
• Accessibility: Ensure your components are accessible by providing clear and informative fallback content for each slot, especially for users relying on screen readers.
• Use Case: Ideal for building components such as cards, dialog boxes, modal windows, layouts, and more.