In React 17, event listeners are attached to the node that your React application is using as the root node, instead of the document. In the diagram above, that would be the div under body.
Previously, if you called e.stopPropagation in a React event handler (say the menu component in the diagram), the event would bubble up to the document anyways, and if you had a listener on the document it would get called.
This can cause bugs if you aren't aware it's happening and you meant for events not to bubble up to the document.
But, it also means that you might have stuff working in your application in < 17.0.0 because of this deviance from the DOM behavior, so upgarding to React 17 might expose that and create bugs.
If you want to get around this, you can add capture: true to your event listeners. This will make sure that the event handlers provided to your event listeners will get called before event handlers deeper down in the DOM tree.
BUT! Only use this if you are 100% sure that you want your event handler to always be called first. In Primer React Components, there are some places where we rely on stopping events from propagating down to the PRC component so that we can opt out of PRC behaviors. Adding capture: true when it's not actually needed would prevent this from happening.