How to get the contenteditable target of a keyup event caught by a parent element in shadow root?

Question

I created a shadow root in the content script of a Chrome extension, and in the shadow root I created a container with id 'container' containing three elements, namely 'parent-1', 'parent-2', and 'parent-3'. In each parent element, there is a child element with contenteditable as true: 'child-1', 'child-2', 'child-3' correspondingly.

<div id="container" onkeyup="catchEventsFun">
  <div id="parent-1">
    <div contenteditable id="child-1"></div>
  </div>
  <div id="parent-2">
    <div contenteditable id="child-2"></div>
  </div>
  <div id="parent-3">
    <div contenteditable id="child-3"></div>
  </div>
</div>

The problem is that when 'child-2' element is triggered by 'keyup' event, the event.target caught in catchEventsFun is the shadow root element.

Methods I've tried:

1. use the composedPath or path: failed with path as null, composedPath as [], and event.composed as true
2. use event.currentTarget: failed with currentTarget as null

How can I get the 'child-2' element as its event bubbles up to the shadow root?