JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red"></div>
<div class="blue"></div>

CSS

.red {
    width: 100px;
    height: 100px;
    background-color: red;
}
.blue, * /deep/ .blue {
    width: 100px;
    height: 100px;
    background-color: blue;
}

JavaScript

var foo = document.querySelector('.red');
var fooSR = foo.createShadowRoot();
var bar = document.createElement('div');
bar.className = 'blue';
bar.style.color = 'yellow';
bar.innerHTML = 'hi';
fooSR.appendChild(bar);