JSFiddle - React, Tailwind, and code Playground

HTML

<div id=box></div>

<pre id=result>
Subpixel hit testing results:
</pre>

CSS

body {
  margin: 0;
  position: absolute;
}

#box {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  margin-top: 10px;
  background-color: green;
}

#result {
  margin: 10px;
}

JavaScript

const rect = box.getBoundingClientRect();

const points = [
	[rect.x - 0.5, rect.y - 0.5],
  [rect.x + rect.width - 0.5, rect.y - 0.5],
  [rect.x - 0.5, rect.y + rect.height - 0.5],
  [rect.x + rect.width - 0.5, rect.y + rect.height - 0.5],
  [rect.x + rect.width, rect.y + rect.height],
];

for (let point of points) {
  const hit = document.elementFromPoint(point[0], point[1]);
  console.log(hit);
  result.innerText += `(${point[0]}, ${point[1]}) -> ${hit.tagName}\n`;
}