Steps to reproduce: Clone repo https://github.com/ling1726/shadow-dom-focusin-repro Setup run npm install run npm run dev navigate to http://localhost:5173/ Steps 1. click on a button 2. output should be: > focusin listener - shadow root > focusin listener - document > click listener - shadow root > click listener - document 3. click on another button 4. output should be: > focusin listener - shadow root > click listener - shadow root > click listener - document Actual results: Each click event is received by the parent document of the open shadow root. No focusin events are fired Expeced results: Each click event is received by the parent document of the open shadow root. Each focusin event is received by the parent document of the open shadow root MDN states (https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) > All UA-dispatched UI events are composed (click/touch/mouseover/copy/paste, etc.). Most other types of events are not composed, and so will return false. For example, this includes synthetic events that are created without their composed option set too true. As I understand it this means that focusin events should bubble up from the Shadow DOM.
<rdar://problem/120059183>