JSFiddle - React, Tailwind, and code Playground

HTML

<div class="shadowOne"></div>
<div class="shadowTwo"></div>
<template id="elementOne">
    <style>
        #style {
            color: red;
        }
    </style>
    <p id="style">Hello World<p>
</template>
<template id="elementTwo">
    <style>
        #style {
            color: blue;
        }
    </style>
    <p id="style">Hi There<p>
</template>

JavaScript

var shadowOne = document.querySelector('.shadowOne').createShadowRoot(),
    shadowTwo = document.querySelector('.shadowTwo').createShadowRoot(),
    elemOne = document.querySelector('#elementOne'),
	elemTwo = document.querySelector('#elementTwo');

shadowOne.appendChild(document.importNode(elemOne.content, true));
shadowTwo.appendChild(document.importNode(elemTwo.content, true))