react-shadow-dom-retarget-events

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 dispatching events to React.

This repo is based on his answer in an npm module.

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 shadowRoot:

import React from 'react';
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.08 Support for cancelBubble and FireFox's composedPath
• v1.07 Support for onBlur
• v1.06 Support von React 16, Added Events, Code Cleanup
• v1.05 Initial commits and basic functionality