JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>
<p>This tests starting a drag inside a shadow tree when the shadow host is draggable.<br>
To manually test, drag and drop the blue box below into a green box.</p>
<div id="target" class="box" draggable="true"><div id="outerTarget">Outside shadow<div id="innerTarget"></div></div></div>
<div id="destination" class="box green">here</div>
<pre id="log"></pre>
<style>
.box { margin: 10px 0; }
.green { width: 100px; height: 100px; padding: 10px; border: solid 5px green; }
#outerTarget {width: 100px; border: 1px solid black;}
</style>
<script>

target.addEventListener('dragstart', (event) => {
	log.textContent += `dragstart event fired on target for: ${event.target.id}\n`;
  event.dataTransfer.setData("foo","bar");
});
target.addEventListener('dragend', (event) => log.textContent += `dragend event fired on target for: ${event.target.id}\n`);
destination.addEventListener('dragenter', (event) => log.textContent += `dragenter event fired on destination for: ${event.target.id}\n`);
destination.addEventListener('dragover', (event) => {
    event.dataTransfer.effectAllowed = "copyMove";
    event.preventDefault();
});
destination.addEventListener('drop', (event) => log.textContent += `drop event fired on destination for: ${event.target.id}\n`);

const shadowRoot = innerTarget.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<style>
.box { width: 100%; height: 100px; background: #36f; }
</style>
<div class="box">Inside shadow</div>`;


</script>
</body>
</html>