Traverse up the tree from shadowRoot element in SVG

I'm preparing visualisation for monitoring a fire alarm system. Flor plan is made in SVG, with detectors being clones of the symbols in the legend. I need to display id of currently active/faulty detector on mouseover.

Mouse over element (cloned):

<use
     xmlns="http://www.w3.org/2000/svg"
     x="0"
     y="0"
     xlink:href="#T0.000.0"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     id="T0.2002.2"
     width="100%"
     height="100%"
     transform="translate(214.99997,-507.73845)"
     inkscape:label="#czujka"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     style="opacity: 1; fill: rgb(255, 255, 255); fill-opacity: 1; stroke: none; stroke-opacity: 1;"
/>

Parent element (in the legend):

<g
    xmlns="http://www.w3.org/2000/svg"
    style="display:inline;fill-opacity:1;enable-background:new"
    inkscape:label="#czujka"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    id="T0.000.0"
    transform="matrix(0.97129703,0,0,0.88838831,-264.13104,95.785416)"
>
    <rect
        y="-65.32663"
        x="547.59875"
        height="13.507604"
        width="12.354611"
        id="rect11435"
        style="fill-opacity:1;stroke:#000000;stroke-width:1.07652116;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
    />
    <path
        inkscape:connector-curvature="0"
        id="path11475" d="m 556.86474,-63.075369 c -15.44327,9.005071 9.26596,0 -6.17731,9.005071"
        style="fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.07652116;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        sodipodi:nodetypes="cc"
        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    />
</g>

The mouse cursor is selecting either rectangle or path elements. parentNode.id is pointing to "T0.000.0", and its parentNode is null. How can I get the id of "T0.2002.2" element?

Additional information moved from comment:

The legend symbols don't have added event listeners themselves. Detectors have added event listeners:

function over(x) {
    pop.innerHTML = x.originalTarget.parentNode.id;
    var pageX = x.pageX;
    var pageY = x.pageY + 25;
    pop.style.left = pageX+"px";
    pop.style.top = pageY+"px";
    pop.style.display = 'block';
}

function out() {
    pop.style.display = 'none';
}

Solution

You should avoid traversing from the shadow root to the instance element. Things get much easier if you attach your event listeners to the <use> elements. For example, you could give all <use> elements representing a detector a class="detector" and write something like this:

var detectors = deocument.querySelectorAll('.detector');

function over(x) {
    pop.innerHTML = x.currentTarget.id;
    ....
}
function out() {....}

detectors.forEach(function (el) {
    el.addEventListener('mouseenter', over);
    el.addEventListener('mouseleave', out);
 });