Event handling with the Shadow DOM and React


#1

I’d like to use onClick on a React component in a shadow DOM node.

The problem is that React has a global event handler on the document and the shadow DOM retargets the event to make it look like it came from the host node. This prevents React from passing the event to the right element.

TextEditorComponent handles this by binding the event listeners on the component’s DOM node directly. However, this only allows you to handle events at the root element unless you do some hacky stuff with the DOM API.

Are there any best practices for doing something like this?


#2

I ran into this too and haven’t found a good solution. It’s a React issue.

There are a couple of unmerged PRs that purport to fix this on the React side: 1877, 1167.


#3

I had the same issue in my table component (a custom element with a react component and a shadow DOM), and I ended with a small mixin to mimic the event delegation that jQuery provides but using only native events and disposable.

You can see how I use it here:

https://github.com/abe33/atom-table-edit/blob/master/lib/table-element.coffee#L64-L146

And the mixin can be found in my atom-utils package:


#4

use event.path: http://w3c.github.io/webcomponents/spec/shadow/#widl-Event-path