JSFiddle - React, Tailwind, and code Playground

HTML

<template id="js-template">
<h1>Nice header</h1>
<script type="text/javascript"> 
console.log('hello');
alert('hi');
</script>
</template>

<template id="js-template2">
<h1>Nice header</h1>
<script type="text/javascript"> 
console.log('hello');
alert('hi from shadow');
</script>
</template>

<div id="a"></div>
<div id="b"></div>

CSS

div#a {
    background-color: red;
}

div#b {
    background-color: green;
}

JavaScript

var root = document.querySelector('#a').createShadowRoot();
var lighttarget = document.querySelector('#b');

var template = document.querySelector('#js-template').content;
var clone = document.importNode(template, true);
template = document.querySelector('#js-template2').content;
var clone2 = document.importNode(template, true);

$(lighttarget).append(clone);
$(root).append(clone2);