HTML - HTML Slot Element (<slot>) for Component Composition

The <slot> element is a fundamental part of Web Components, specifically used in combination with the Shadow DOM to enable flexible and reusable component design. It allows developers to define placeholders inside a custom component where external content can be inserted. This mechanism is known as content projection.

1. Purpose of the <slot> Element

When building a custom HTML element, you often want the component to have a fixed internal structure while still allowing users of that component to inject their own content into specific areas. The <slot> element solves this by acting as a placeholder inside the component’s Shadow DOM.

Instead of hardcoding all content inside a component, <slot> allows dynamic insertion of child elements from outside the component.

2. Basic Concept

A Web Component typically has:

  • A custom element (user-defined HTML tag)

  • A Shadow DOM (encapsulated internal structure)

  • One or more <slot> elements inside the Shadow DOM

Content placed between the custom element’s opening and closing tags is distributed into the slots.

3. Example Without Slot

If you create a custom component without <slot>, any content placed inside the component will not appear because the Shadow DOM overrides the light DOM content.

4. Example With Slot

<my-card>
  <p>This is user content</p>
</my-card>

Inside the component:

<template id="card-template">
  <div class="card">
    <slot></slot>
  </div>
</template>

In this case, the paragraph is inserted into the <slot> location.

5. Named Slots

You can define multiple slots and control where different pieces of content go by using named slots.

Component template:

<div class="card">
  <header>
    <slot name="title"></slot>
  </header>
  <section>
    <slot name="content"></slot>
  </section>
</div>

Usage:

<my-card>
  <h2 slot="title">Card Title</h2>
  <p slot="content">This is the content</p>
</my-card>

Each element is placed into the corresponding named slot.

6. Default Slot Content

A slot can have fallback content, which is displayed when no external content is provided.

<slot>
  Default content if nothing is passed
</slot>

If the user does not supply content, this default content will appear.

7. Slot Behavior and Rules

  • Only elements with a matching slot attribute will fill a named slot.

  • Elements without a slot attribute go into the default slot.

  • If no matching slot is found, the content is not rendered.

  • Slots work only inside Shadow DOM, not in regular HTML.

8. Slot Distribution Process

When the browser renders a Web Component:

  1. It looks at the Shadow DOM structure.

  2. It identifies <slot> elements.

  3. It matches external (light DOM) children to slots based on the slot attribute.

  4. It inserts them into the appropriate slot positions.

9. Advantages of Using <slot>

  • Enables reusable and flexible components

  • Maintains separation between structure and content

  • Allows customization without modifying component code

  • Works natively without frameworks

10. Real-World Use Cases

  • Card components with customizable headers and content

  • Layout components such as headers, sidebars, and footers

  • Modal dialogs where content varies

  • UI libraries that require flexible composition

11. Limitations

  • Requires understanding of Shadow DOM

  • Styling slotted content can be tricky due to encapsulation

  • Not supported in very old browsers without polyfills

12. Summary

The <slot> element is a powerful feature that enables content insertion into Web Components. It allows developers to design components that are both structured and flexible, making it easier to build scalable and maintainable front-end architectures.