Slot Tag in HTML: A Simple Guide to Templates and Components

If you’ve been wondering about integrating flexible structures inside a web component to define and display your markup, stick around.

The <slot> tag fits neatly into the shadow DOM, allowing you to create separate DOM trees that preserve isolation while still accepting content from the main document. This methodology opens the door for crafting dynamic layouts inside a web component, giving engineers the ability to define structures, integrate a <template> element, and add multiple elements within each slot’s content.

By using slots in HTML, developers can set a placeholder inside a web component, attach a named slot, and elegantly link content from the light DOM to the component’s shadow root. Think of it as a strategic way to maintain the same structure across multiple sections.

Let’s get started! ✨

---

What is the Slot Tag?

The <slot> tag is an element used within the shadow DOM, often wrapped around a <template>. Its purpose is to act as a placeholder inside a web component, helping define where incoming markup from the document should appear. By using the slot attribute along with a name attribute, developers can map an HTML element in the light DOM to a specific named slot in the shadow DOM.

This relationship ensures that custom elements can incorporate externally provided markup into their internal structure while preserving the original content’s integrity. It’s a neat pattern for creating separate DOM trees and handling multiple elements, giving you the power to merge a DOM tree with isolated scoping rules.

---

Using Templates with Web Components

A <template> element forms the backbone of content that a web component can host. You can declare fragments of HTML using <template> and later pull them into the shadow root using JavaScript. This mechanism pairs perfectly with the <slot> element, allowing placeholders to house your future <div> structures.

Example: Fallback Content

If a named slot isn’t filled, you might insert fallback content:

1<div class="custom-layout">Fallback Content</div>

Example: Component Rendering a Template

1<template id="card-template">
2  <style>
3    ::slotted(h2) {
4      font-weight: bold;
5      font-family: sans-serif;
6      font-size: 16px;
7      border-left: 2px solid #000;
8      padding-left: 5px;
9      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
10    }
11  </style>
12  <div class="wrapper">
13    <slot name="header"></slot>
14    <slot name="content"></slot>
15    <slot name="footer"></slot>
16  </div>
17</template>
18
19<script>
20  class MyCard extends HTMLElement {
21    constructor() {
22      super();
23      const shadowRoot = this.attachShadow({ mode: 'open' });
24      const template = document.getElementById('card-template');
25      const content = template.content.cloneNode(true);
26      shadowRoot.appendChild(content);
27    }
28  }
29
30  customElements.define('my-card', MyCard);
31</script>

Here, <slot> elements define placeholders for incoming content, while the shadow DOM ensures styles and structure remain isolated.

---

The Slot Attribute

The slot attribute specifies which slot element a piece of markup belongs to. For example:

1<h2 slot="header">My Header</h2>

Adding slot="header" instructs the shadow DOM to place this content into the slot named "header". This mechanism ensures predictable content distribution.

---

Styling and Accessibility Considerations

The <slot> element itself doesn’t impose styles. Instead, styles are applied to its content using the ::slotted() pseudo-element. Example:

1::slotted(h2) {
2  font-weight: bold;
3  font-family: sans-serif;
4  font-size: 16px;
5}

Accessibility Notes:

• Slotted content retains the semantics of the original HTML elements.
• ARIA attributes and roles remain unaffected, ensuring compatibility with assistive technologies.

---

Advanced Topics in Web Components

For complex interfaces, the shadow DOM provides encapsulation while maintaining predictable content insertion. Named slots allow mapping of multiple elements from the main document into specific placeholders.

Example: Multiple Named Slots

1<template>
2  <style>
3    :host {
4      display: block;
5    }
6    ::slotted(h2) {
7      font-size: 18px;
8      font-weight: bold;
9    }
10  </style>
11  <div>
12    <slot name="header"></slot>
13    <slot name="content"></slot>
14    <slot name="footer"></slot>
15  </div>
16</template>

Each slot ("header", "content", "footer") maps to content passed from the light DOM. By following these principles, developers can create scalable and modular web components.

---

Best Practices and Additional Resources

• Use meaningful slot names to indicate content purpose.
• Include fallback content for scenarios where no data is passed.
• Test components in various environments to ensure predictable results.

Reference Code Snippet:

1class MyCard extends HTMLElement {
2  constructor() {
3    super();
4    const shadowRoot = this.attachShadow({ mode: 'open' });
5    const template = document.getElementById('card-template');
6    const content = template.content.cloneNode(true);
7    shadowRoot.appendChild(content);
8  }
9}
10
11customElements.define('my-card', MyCard);

By following these best practices, developers can ensure their components are robust, maintainable, and user-friendly.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.