JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<style>
div {
  padding: 1em;
  border: 0.2em solid purple;
  margin: 1em;
}
</style>
<div id="w">
  <div id="t">Click me</div>
</div>
<pre id="log"></pre>

JavaScript

function logger(event) {
  document.querySelector('#log').textContent += event.target.id + '\n';
}
    
var w = document.querySelector('#w');
var t = document.querySelector('#t');

var s = new WebKitShadowRoot(w);
s.innerHTML = '<div id="u" style="border: 0.2em solid orange;"><content></div>';
var u = s.querySelector('#u');

[w, t, u].forEach(function (e) {
  e.addEventListener('click', logger);
});