Slot Tag in HTML: Simplify Content Distribution Now

Where should custom content go in your component? Learn how the slot tag helps structure content in shadow DOM without losing control. Get practical tips and examples to build cleaner HTML components.

Building reusable web components often sounds simple—until you need to control where custom content should appear. Content placement inside a shadow DOM can get messy quickly without the right approach. That’s where the slot tag comes in.

Why is content insertion such a challenge in component-based design?

The slot element gives you a structured way to display user-provided content without breaking encapsulation.

In this article, you’ll learn how it works, how to use it in real-world templates, and how to style slotted elements precisely. We’ll cover its syntax, behavior, and practical use cases with clear examples and diagrams.

If you want to improve your understanding of HTML components and the shadow DOM, this walkthrough will help you build confidently.

---

Key Takeaways

• Understand how the slot tag works inside the shadow DOM
• Learn how to use named slots and default slot values
• Style and control light DOM content using slot attributes
• Discover how to build and structure reusable web components
• Explore how template elements and shadow DOM interact

---

What is a slot tag?

The slot tag is an HTML element used in web components to define placeholders for external content projected into a component’s shadow DOM. It's a pseudo-element allowing developers to control where content appears, even using separate DOM trees.

By default, when you create a shadow root, content placed inside the custom element won't show unless explicitly routed through a slot.

Example:

Copy
<custom-card>
  <h3 slot="title">Article Title</h3>
  <p slot="body">This is the body content.</p>
</custom-card>

The inner content here is routed to the shadow DOM’s named slot using the slot attribute.

---

Anatomy of a Web Component Using Slots

Here's how you might build a simple custom element that uses slots:

HTML Template

Copy
<template id="card-template">
  <style>
    .card {
      border: 1px solid #ddd;
      padding-left: 16px;
      font-family: sans-serif;
      font-size: 16px;
      border-radius: 4px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    ::slotted(h3) {
      font-weight: bold;
      font-size: 20px;
    }
  </style>
  <div class="card">
    <slot name="title"></slot>
    <slot name="body"></slot>
  </div>
</template>

JavaScript to Define Component

Copy
class CustomCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.getElementById('card-template');
    const content = template.content.cloneNode(true);
    shadow.appendChild(content);
  }
}

customElements.define('custom-card', CustomCard);

The class extends the HTMLElement approach to define the custom element. The template is cloned into the shadow root, forming a new shadow tree with light DOM content projected into the slot elements.

---

Understanding Named Slots and Default Slots

Named Slot

Named slots are declared using the name attribute:

Copy
<slot name="title"></slot>

To project content, use the slot attribute on elements inside the light DOM:

Copy
<h3 slot="title">Blog Title</h3>

Default Slot

A default slot is used when no name attribute is provided. It's the fallback for any content without a specified slot name.

Fallback Content

If no content is passed into a slot, you can specify fallback content:

This improves web page UX by displaying useful placeholder content.

---

Shadow DOM and Light DOM Interaction

When using web components, the light DOM (where the consumer places their content) is separate from the shadow DOM, which defines internal layout and styles. This creates separate DOM trees, allowing style encapsulation and markup control.

Explanation: The user writes markup inside the custom element, which becomes the slot’s content. The slot element then routes this to the component's shadow DOM tree.

---

Styling Slotted Content

To apply CSS styles to content passed through slots, use the ::slotted pseudo-element.

Example:

This allows font weight bold or font family sans-serif to be applied while maintaining encapsulation. Keep in mind:

• Styles inside shadow DOM do not bleed into light DOM
• Only direct slotted elements can be styled (not children inside them)

---

Creating Reusable Templates with Slot Elements

Using the template element, we can declare fragments of reusable HTML, then clone and insert them dynamically.

In JavaScript, clone the template content:

Slot element lets you inject different messages into the same structure using different slot names.

---

Using span slot and div class Patterns

Sometimes developers use a span slot or div class combinations to maintain the layout:

This is useful for adding a placeholder inside a web component, controlling layout and padding left or border left while still using flexible template content.

---

Complete Example: Custom Tooltip Component

Template HTML:

JavaScript Component Logic:

Use the component as:

---

Summary Table: Slot Tag Concepts

---

Start Structuring Smarter Components Now

The slot tag helps you insert flexible content into web components without losing structure or clarity. Named and default slots let you control layout while keeping encapsulation intact. Combined with shadow DOM, they make your components cleaner and easier to reuse.

As projects grow, you’ll need modular UI building blocks that support custom content. Start applying these techniques to create components that last, adapt, and perform well.

<slot></slot>

<slot name="footer">No footer provided</slot>

::slotted(h3) {
  color: #333;
  font-weight: bold;
}

<template id="message-template">
  <div class="message">
    <slot name="message"></slot>
  </div>
</template>

<div class="header">
  <span slot="title">My Title</span>
</div>

<template id="tooltip-template">
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
    }
    .tooltip-text {
      visibility: hidden;
      background-color: black;
      color: white;
      font-family: sans-serif;
      font-size: 14px;
      font-weight: bold;
      padding: 5px 10px;
      border-radius: 4px;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
    .tooltip:hover .tooltip-text {
      visibility: visible;
    }
  </style>
  <div class="tooltip">
    <slot></slot>
    <div class="tooltip-text">
      <slot name="tooltip-text">Default tooltip</slot>
    </div>
  </div>
</template>

class CustomTooltip extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.getElementById('tooltip-template');
    const content = template.content.cloneNode(true);
    shadow.appendChild(content);
  }
}

customElements.define('custom-tooltip', CustomTooltip);

<custom-tooltip>
  <span>Hover me</span>
  <span slot="tooltip-text">This is the tooltip info</span>
</custom-tooltip>