JSFiddle - React, Tailwind, and code Playground

by Niranjan Rajendran

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="shadow-host">
</div>

CSS

#app {
  padding: 12px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>a:after {
  content: ">";
  float: right;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: 0px;
  margin-left: 0px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

TypeScript

var shadow = document.querySelector('#shadow-host').attachShadow({mode: 'open'});
shadow.innerHTML = '<div id=shadow-content><p>Shadow Root</p><div id="nested-shadow-host"></div></div>';

var nestedShadow = shadow.querySelector('#nested-shadow-host').attachShadow({mode: 'open'});
nestedShadow.innerHTML = '<div id="nested-shadow-content"><p>Nested Shadow Root</p></div>';


document.addEventListener("click", (event) => {
	console.log("clicked", event.target.innerText);
})