JSFiddle - React, Tailwind, and code Playground

HTML

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

<template id = "im-a-template">
    <h1></h1>
    <h1>Class Id: </h1>
    <input type="text" placeholder = "Name"></input>  
</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;
var el = documentFragment.querySelector("h1");
el.innerHTML = 'Sample Title'
// this is a cloned version of the object that you can use anywhere.
var templateClone = documentFragment.cloneNode(true);

root.appendChild(templateClone); // this empty root now has your template