<!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
>