The
<slot>tag is a placeholder inside a Web Component that allows developers to pass external content (light DOM) into the shadow DOM.
It helps in creating flexible and reusable custom elements where parts of the content can be dynamically replaced.
Syntax
<slot name="slotName">Default content</slot>Attributes
| Attribute | Description |
|---|---|
| name | Defines the name of the slot so specific content can be assigned to it. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slot Tag Example</title>
</head>
<body>
<template id="user-card">
<style>
div {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
width: 200px;
font-family: Arial, sans-serif;
}
</style>
<div>
<h3><slot name="username">Guest User</slot></h3>
<p><slot name="description">No description available.</slot></p>
</div>
</template>
<script>
class UserCard extends HTMLElement {
constructor() {
super();
const template = document.getElementById("user-card").content;
const shadow = this.attachShadow({ mode: "open" });
shadow.appendChild(template.cloneNode(true));
}
}
customElements.define("user-card", UserCard);
</script>
<user-card>
<span slot="username">Swapnil Raja</span>
<span slot="description">Web Developer & Designer</span>
</user-card>
</body>
</html>Output
Browser Output
The <slot> tag itself has no direct visible output.
However, when rendered in a browser that supports Web Components, it displays the external content (slot-assigned text or elements) inside the shadow DOM area of the custom component.
Please use our TryIt Editor to view the rendered result.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ❌No |
All major browsers support <slot> tag except of IE
Notes
- The
<slot>tag is only meaningful when used inside a shadow DOM of a Web Component. - You can define named slots using the
nameattribute and insert specific content using the correspondingslotattribute in light DOM. - Default slot content appears when no light DOM content is provided for that slot.
Conclusion
The <slot> tag enables content projection in Web Components, allowing external content to be inserted dynamically.
It enhances the flexibility and reusability of custom elements in modern web development.
