Français

<slot>

Punching a hole in a component for the outside to fill

— 1 min read

  • HTML
  • accessibility
  • semantics

<slot> — The insertion point

The <slot> element defines a placeholder inside the Shadow DOM of a Web Component. Content passed in by the component's user fills that hole. It is the composition mechanism of Web Components.

When to use it

You are building a Web Component and want users to inject their own content into it. A named <slot> lets you target a specific location (title, body, footer). An unnamed <slot> receives all content that is not targeted.

What you gain

Accessibility: content injected into a <slot> stays in the main DOM. Screen readers access it normally. The Shadow DOM does not create an accessibility barrier for slotted content.

Code example

<!-- Component definition -->
<template id="card-template">
  <div class="card">
    <slot name="title">Default title</slot>
    <slot>Default content</slot>
  </div>
</template>
 
<!-- Component usage -->
<my-card>
  <h2 slot="title">Product name</h2>
  <p>Description goes here.</p>
</my-card>

Further reading