JSFiddle - React, Tailwind, and code Playground

HTML

<div class="custom-element">
  <span>Light DOM</span>
</div>

CSS

.custom-element span{
  color:gray;
}

.custom-element::shadow .green-span{
  color:green;
}

JavaScript

var el = document.querySelector('.custom-element');
var shadow = el.createShadowRoot();
var inner = el.querySelector('span');

shadow.innerHTML += '<span>Shadow DOM - red</span><br>';
shadow.innerHTML += '<span class="green-span">Shadow DOM - green</span><br>';
shadow.innerHTML += '<content></content>';
shadow.innerHTML += '<style>span { color: red; }</style>';