HTML <slot> Tag
HTML
The <slot> HTML element can be used as a placeholder inside a web component that you can fill with any markup element.
HTML <slot> Tag
➔ The <slot> tag is a placeholder.
➔ This placeholder within a web component that you can fill in with any custom markup.
➔ This allows the creation and merging of separate DOM trees.
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML slot tag Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
<body>
<h3>HTML slot tag Example</h3>
<template id="my-template">
<h1>
<slot name="heading"></slot>
</h1>
<ol>
<li>
<slot name="title"></slot>
</li>
<li>
<slot name="desc"></slot>
</li>
</ol>
<style>
h1 {
font-size: 1.3em;
color: #123456;
background-color: #cafd88;
padding: 2px 10px;
}
ol li {
color: #000;
background-color: #e44cc4;
margin: 2px;
padding: 5px 10px;
width: 200px;
}
</style>
</template>
<div>
<span slot="heading">Flowers:</span>
<span slot="title">Gardenia</span>
<span slot="desc">Rose</span>
</div>
<script>
var templateContent = document.querySelector('template').content;
var divs = document.querySelectorAll('div');
divs.forEach(function (div) {
div.attachShadow({ mode: 'open' }).appendChild(
templateContent.cloneNode(true))
});
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML slot tag Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
<body>
<h3>HTML slot tag Example</h3>
<template id="my-template">
<h1>
<slot name="heading"></slot>
</h1>
<ol>
<li>
<slot name="name1"></slot>
</li>
<li>
<slot name="name2"></slot>
</li>
<li>
<slot name="name3"></slot>
</li>
</ol>
<style>
h1 {
font-size: 1.3em;
color: #123456;
background-color: #cafd88;
padding: 2px 10px;
}
ol li {
color: #000;
background-color: #e44cc4;
margin: 2px;
padding: 5px 10px;
width: 200px;
}
</style>
</template>
<div>
<span slot="heading">Flowers:</span>
<span slot="name1">Gardenia</span>
<span slot="name2">Rose</span>
<span slot="name3">Hibiscus</span>
</div>
<div>
<span slot="heading">Fruits:</span>
<span slot="name1">Apple</span>
<span slot="name2">Banana</span>
<span slot="name3">Orange</span>
</div>
<script>
var templateContent = document.querySelector('template').content;
var divs = document.querySelectorAll('div');
divs.forEach(function (div) {
div.attachShadow({ mode: 'open' }).appendChild(
templateContent.cloneNode(true))
});
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML slot tag Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
<body>
<h3>HTML slot tag Example</h3>
<template id="my-template">
<h1>
<slot name="heading"></slot>
</h1>
<div class="imgdiv"><slot name="name1"></slot></div>
<p><slot name="name2"></slot></p>
<style>
h1 {
font-size: 1.3em;
color: #123456;
background-color: #cafd88;
padding: 2px 10px;
}
p {
color: #000;
background-color: #e44cc4;
margin: 2px;
padding: 5px 10px;
width: 230px;
}
.imgdiv{
width:250px;
border:1px solid #e5e5e5;
}
</style>
</template>
<div>
<span slot="heading">Flowers:</span>
<span slot="name1"><img src="./resources/images/flower-rose.png" alt="flower"></span>
<span slot="name2">Gardenia</span>
</div>
<div>
<span slot="heading">Fruits:</span>
<span slot="name1"><img src="./resources/images/fruits-blackberry.png" alt="Fruits"></span>
<span slot="name2">Apple</span>
</div>
<script>
var templateContent = document.querySelector('template').content;
var divs = document.querySelectorAll('div');
divs.forEach(function (div) {
div.attachShadow({ mode: 'open' }).appendChild(
templateContent.cloneNode(true))
});
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.