JSFiddle - React, Tailwind, and code Playground

HTML

<div id='host'>
  <span>Click Me</span>
</div>

CSS

div {
    background-color: #00ffff;
    width: 100px;
    height: 100px;
  }
  span:active  {
    display: none;
  }

JavaScript

var root = document.getElementById('host').createShadowRoot();
root.innerHTML =
  '<style> div {background-color: #00ff00;}div:active {background-color: #ff0000;}</style><div id=shadowdom style="width: 100px; height: 100px"><content></content></div>'