react-shadow-dom-retarget-events

What it does

Fixes events for react components rendered in a shadow dom.

Why

When you render a react component inside shadow dom events will not be dispatched to react. I.e. when a user clicks in your react component nothing happens. This happens (or does not happen) with any events.

A bug is filed at #10422.

How to fix it

Luckily someone wrote a workaround on Stack Overflow. It works by adding vanilla JS event listeners and dispatches events to React.

This repo is his answer in an npm module (with some code cleanups and a bug fix).

Installation

yarn add react-shadow-dom-retarget-events or

npm install react-shadow-dom-retarget-events --save

Usage

import retargetEvents and call it with the shadowDom:

import retargetEvents from 'react-shadow-dom-retarget-events';

class App extends React.Component {
  render() {
  	return (
        <div onClick={() => alert('I have been clicked')}>Click me</div>
    );
  }
}

const proto = Object.create(HTMLElement.prototype, {
  attachedCallback: {
    value: function() {
      const mountPoint = document.createElement('span');
      const shadowRoot = this.createShadowRoot();
      shadowRoot.appendChild(mountPoint);
      ReactDOM.render(<App/>, mountPoint);
      retargetEvents(shadowRoot);
    }
  }
});
document.registerElement('my-custom-element', {prototype: proto});

History

• v1.07 Support for onBlur
• v1.06 Support von React 16, Added Events, Code Cleanup
• v1.05 Initial commits and basic functionality

Credits

Credits go to @josephnvu on Stack Overflow