<slot>

slot tag

The <slot> tag in HTML is utilized in Web Components to create placeholders for dynamic content. It enables developers to design reusable components that can accept custom content at the time of use.

Syntax

<slot name="slot-name"></slot>

<h1>The template Element</h1>

<p>Click the button below to display the hidden content from the template element.</p>

<button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
  let temp = document.getElementsByTagName("template")[0];
  let clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

Attributes

This element includes the following attributes:

• name: Specifies the name of the slot.

See also

• HTML <template> element
• HTML slot attribute
• CSS ::slotted pseudo-element
• CSS scoping module

Conclusion

The <slot> tag in HTML enables the creation of reusable and customizable Web Components by allowing dynamic content to be injected into the component’s shadow DOM. With the use of named slots and the ::slotted CSS pseudo-element, developers can provide greater flexibility in content insertion and styling.