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

function printProperties(object) {
    for(obj in object) {
        console.log(obj + ' : ' + object[obj]);
    } 
};

var host = document.querySelector('#hoster');
var root = host.createShadowRoot(); // create the host root
var template = document.querySelector('#im-a-template');
var documentFragment = template.content;

var templateClone = documentFragment.cloneNode(true);
printProperties(templateClone);
console.log(templateClone);
templateClone.querySelector("#nameInput").placeholder = "SpecialName";
root.appendChild(templateClone); // this empty root now has your template