JSFiddle - React, Tailwind, and code Playground

HTML

<p>red sqaure is the shadow droppable, blue square is normal droppable</p>

<div id="shadow-container"></div>

<div id="dropable"></div>

JavaScript

var createShadowDropper = function (container) {
    var root = new WebKitShadowRoot (container),
        dropArea = document.createElement('div')

    dropArea.style.backgroundColor = 'red'
    dropArea.style.width = '100px'
    dropArea.style.height = '100px'

    root.appendChild(dropArea)

    dropArea.addEventListener('drop', function (e) { 
      e.preventDefault()
      e.stopPropagation()
      alert('shadow dropped')
    })        
}

var createNormalDropper = function (element) {
  element.style.backgroundColor = 'blue'
  element.style.width = '100px'
  element.style.height = '100px'

  element.addEventListener('drop', function (e) {
    e.preventDefault()
    e.stopPropagation()
    alert('normal dropped')
  })
}                

createNormalDropper(document.getElementById('dropable'))        
createShadowDropper(document.getElementById('shadow-container'))