JSFiddle - React, Tailwind, and code Playground

HTML

<div id=a>a<div id=b>b<div id=host></div></div></div>

CSS

div {
  margin-left: 30px;
  border: 1px solid;
}

JavaScript

function add(el) {
  for (const type of ['mouseenter', 'mouseleave']) {
    el.addEventListener(type, e => {
      console.log(type + ' target: ' + e.target.id + ' (relatedTarget: ' + (e.relatedTarget ? e.relatedTarget.id : "none") + ')');
      console.log(e.composedPath());
    });
  }
}

const sr = host.attachShadow({ mode: 'open'});
sr.innerHTML = '<style>div { margin-left: 30px; border: 1px solid </style>' +
  '<div id=sa>sa<div id=sb>sb</div></div>';

add(a);
add(b);
add(host);
add(sr.querySelector('#sa'));
add(sr.querySelector('#sb'));