JSFiddle - React, Tailwind, and code Playground

by dtracers

HTML

<div id = "hoster">
    <span class = "title">Title</span>
    <span class = "id">51ab89af</span>
</div>

<template id = "im-a-template">
    <h1><content select =".title"></content></h1>
    <h1>Class Id: <content select = ".id"></content></h1>
    <input id = "nameInput" type="text" placeholder = "Name"></input> 
    <script type = "text/javascript">
        function callMe() {
            alert("Ive been called");
        }
    </script>
</template>

JavaScript

// find where you want to put your shadow dom in
var host = document.querySelector('#hoster');

var root = host.createShadowRoot(); // create the host root

var template = document.querySelector('#im-a-template');

// this is the node of the object you wanted
var documentFragment = template.content;
console.log(documentFragment);
// this is a cloned version of the object that you can use anywhere.
var templateClone = documentFragment.cloneNode(true);
console.log(templateClone);
//templateClone.callMe();
templateClone.querySelector("#nameInput").placeholder = "SpecialName";
root.appendChild(templateClone); // this empty root now has your template