HTML <slot> Tag - GeeksforGeeks

18 Oct, 2021
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>
Output:                       
Supported Browsers:
Chrome
Edge
Firefox
Brave
Opera
Safari
Internet Explorer
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Tags
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript