Support for remote events with RemoteMutationObserver

Hi there!

I want to have interactive UI that renders in the host and propagates events to the remote, where the JS runs, without requiring custom elements with the events explicitly defined. In this scenario, it may be infeasible to create RemoteElements at compile time, so I want this to work with an arbitrary DOM tree returned by the remote side.

Investigation

From my testing, it looks like RemoteMutationObserver does not propagate event listeners attached on the remote side to the host side.

Example: https://gist.github.com/jhead/081edae41ee6600d2280fac63a9ffedb

In the example, I have a simple <button> that I want to work host-side, when clicked it should trigger the event listener code to update the counter.

• Clicking the button on the host side does nothing (no listener)
• Clicking the button on the remote side (inside the iframe) works and updates the count (on both remote and host side)

Reading through the docs, it seems the preferred approach here is to define a custom RemoteElement and explicitly set the click event as a "remote event". But as I mentioned above, this isn't always feasible (unless I'm missing something!).

POC

My understanding of why this is difficult is that the original listener lambda cannot reliably be passed to the host side (even if serialized), so instead we need to auto-register listeners host-side that just notify the remote to dispatch the event to the original node.

https://github.com/jhead/remote-dom/commit/7b9edfd1f4d53b3115152932843bb3789dd57a90

I hastily threw together a fork that supports this by essentially:

1. Monkey patch addEventListener et al to capture the original lambda and event type
2. Attach a "proxy" even listener to the node to dispatch the event
3. Registers the listener in REMOTE_EVENT_LISTENERS so that it's wired up (based on existing remote event code)

It does work with vanilla JS and Preact, but it does not work with React proper. I assume it has something to do with React's synthetic event system, but I haven't dug into it much yet.

Ask

Is this feasible to support and could it be a goal of this project? If so, I'd be open to contributing it but I'd need some advice on how best to approach it, as the POC is very naive and hacked together.

Or is there a more obvious path here that I'm missing that could achieve the same functionality?

Looks similar to this comment as well: https://github.com/Shopify/remote-dom/issues/365#issuecomment-2212501227

Thanks in advance!

Start by reviewing RemoteMutationObserver and the existing remote event code, then compare the approach in commit 7b9edfd1f4d53b3115152932843bb3789dd57a90. Determine whether listeners on arbitrary remote DOM trees can be propagated to the host, including the React synthetic event case; done means host-side interaction triggers the remote listener without requiring predefined custom RemoteElements.