<html>
<head>
<style>
article:focus {
border: 2px solid red;
}
</style>
<script>

const isShadowRootModeSupported =
HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode");

document
.querySelector("p[hidden]")
.toggleAttribute("hidden", isShadowRootModeSupported);

</script>
</head>
<body onload=" setTimeout(onl, 500);">
<h1>HTML Template Element Usage</h1>
<h3>Thanks to https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template and https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM</h3>
<br>
<div id="container"></div>

<template id="template" data-shadowrootmode="open">
<div>Click me</div>
</template>

<p hidden>
⛔ Your browser doesn't support <code>shadowrootmode</code> attribute yet.
</p>
<article>
<style>
p {
padding: 8px;
background-color: wheat;
}
</style>
<p>I'm in the DOM.</p>
</article>
<article>
<template shadowrootmode="open" shadowrootdelegatesfocus>
<style>
p {
padding: 8px;
background-color: plum;
}
</style>
<p>I'm in the shadow DOM.</p>
<input type="text" placeholder="Input inside Shadow DOM" />
</template>
</article>

<br><button style="background-color: wheat;" onclick=" if (document.getElementsByTagName('article')[eval(-1 + document.getElementsByTagName('article').length)].outerHTML.indexOf('hidden') == -1) { document.getElementsByTagName('article')[eval(-1 + document.getElementsByTagName('article').length)].style.visibility='hidden'; } else { document.getElementsByTagName('article')[eval(-1 + document.getElementsByTagName('article').length)].style.visibility='visible'; } ">Toggle <font color=plum>plum</font> shadow DOM above</button>

<script>

function onl() {
const container = document.getElementById("container");
const template = document.getElementById("template");

function clickHandler(event) {
event.target.append(" — Clicked this first div");
}

function clickHandlerTwo(event) {
event.target.append(" — Clicked this second div");
}

const firstClone = template.content.cloneNode(true);
firstClone.addEventListener("click", clickHandler);
container.appendChild(firstClone);

const secondClone = template.content.cloneNode(true);
secondClone.children[0].addEventListener("click", clickHandlerTwo);
container.appendChild(secondClone);

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ("content" in document.createElement("template")) {
// Instantiate here ...
} else {
alert('Templates not supported');
}
}
</script>
<iframe scrolling="no" frameborder="0" title="Interactive or visual content" sandbox="allow-same-origin allow-forms allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation" srcdoc="<div onclick='this.innerHTML+=this.title;' title=' ... you clicked in my sandbox' id=dif>Click Me</div>" data-src="https://flo.uri.sh/visualisation/22061996/embed?auto=1" style="width: 100%; height: 968.289px;"></iframe>
</body>
</html>