Event issues with portals and considering a rework of how handlers are installed

[WorldSEnder]

Problem
Currently, the event handlers are installed on the global document. This mirrors how react used to do it before v17.0, see also the relevant issue on their side: facebook/react#2043. This is similar to #1564 but more geared towards a correct portal implementation (and might have one-solution-to-close-them-all).

To summarize the issues with current behavior:

• Multiple roots, as implemented with portals Implementation of portals #2147, can fail to propagate events correctly. I've not thought of this when I wrote the impl, here's my current understanding:
  • Events fired inside the shadow dom propagate up to the shadow dom until they reach the shadow root, and then change their target to point to the element containing the shadow dom. Thus when they are captured by the installed delegate listener on document, they are dropped, because yew thinks the event was fired on the outer shadow host, not the inside.
  • Events fired inside an iframe stop propagating at the inner document (and never reach the delegate)
• Running multiple instances on the same page does not always work as expected. I have not experienced this myself, but consider if one instance stops the propagation of a captured element, it's stopped in the other one as well

Things to worry about when addressing this issue:

• Some events, most notably selectionchange, are fired on the containing document. This is true even when the element is inside a shadow dom (not stopping at the shadow root), but the events still only fire at (potential) containing <iframe> document.
• Other issues I've currently not fully investigated that my be connected: Behaviour of onselectionchange attribute on an element #1809, No way to listen to custom events exposed by custom elements #1777, Correct way to handle NodeRef reassignments? #1439

How to address this

I think the most straight forward way is to pass down, in VDiff, the outermost host element, in which yew renders and target that for event listeners instead of document.body. Then, the host elements of portals also count as host elements and register for events.

Steps To Reproduce
I will edit this with a reproduction issue, when I'm done with this.

Expected behavior
Events should work in shadow dom and other circumstances. The listeners should be registered on elements hosting yew components, not at the document root.

Environment:

• Yew version: master

Questionnaire

• I'm interested in fixing this myself but don't know where to start
• I would like to fix and I have a solution
• I would like to fix this, but I'm unsure about the scope of work here :)
• I don't have time to fix this right now, but maybe later