HTML <slot> Tag

Last Updated : 28 Jul, 2022

The slot is the element part of the web component technology which is a placeholder inside a component that you simply can fill together with your own markup, which allows you to make separate DOM trees and represent them together.

Syntax:

<slot>
    <h1>Heading</h1>
</slot>

Attributes:

name: It describes the name of the slot.

Approach: The following elements are used in the example code given below.

Template: The template element is employed to declare fragments of HTML that will be inserted within the document by script. Contents aren’t rendered until they are added to the document in a script. This is often the part that contains the <slot> elements.
Content: This part contains the content that’s inserted where the <slot> elements are within the template. So during this case, the span elements will find yourself where the elements are available. Each span element refers to a selected <slot> element via its slot attribute. Any CSS that you simply include within the template element is merely applied to the DOM tree. It won’t affect the remainder of the page.
Script: The primary list is inserted <slot> with the element but the second list isn’t. The main styles are declared inside the template element, which suggests that they are only applied to HTML elements that are within that shadow DOM tree. If the styles are outside of the template element, those styles are only applied to the second list, and therefore the first list goes unstyled.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        h1 {
            font-size: 2.2em;
            font-family: Arial, Helvetica, sans-serif;
            color: coral;
        }
 
        dl {
            border-left: 5px solid yellowgreen;
            padding-left: 1em;
        }
 
        dt {
            font-weight: bold;
            font-size: 2em;
        }
 
        dd {
            color: darkslategray;
            font-size: 1.6em;
        }
    </style>
</head>
 
<body>
    <template>
        <h1>
            <slot name="heading"></slot>
        </h1>
        <dl>
            <dt>
                <slot name="parent-1"></slot>
            </dt>
            <dd>
                <slot name="child-1"></slot>
            </dd>
            <dt>
                <slot name="parent-2"></slot>
            </dt>
            <dd>
                <slot name="child-2"></slot>
            </dd>
        </dl>
    </template>
 
    <section>
        <span slot="heading">GeeksforGeeks</span>
        <span slot="parent-1">GFG</span>
        <span slot="child-1">
            A computer science portal for geeks
        </span>
        <span slot="parent-2">Slot tag</span>
        <span slot="child-2">
            Create separate DOM trees and present them together.
        </span>
    </section>
     
    <script>
        let dlTemplate = document.querySelector('template').content;
        let sections = document.querySelectorAll('section');
 
        sections.forEach(function (section) {
            section.attachShadow({ mode: 'open' }).appendChild(
                dlTemplate.cloneNode(true))
        });
    </script>
</body>
 
</html>