# react-shadow-dom-retarget-events

> Retargets event in a shadow root to react

Latest version **1.1.0** (published 2021-07-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-shadow-dom-retarget-events
pnpm add react-shadow-dom-retarget-events
yarn add react-shadow-dom-retarget-events
bun add react-shadow-dom-retarget-events
```

## Health

**Score 18/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2021-07-21 |
| First published | 2017-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-shadow-dom-retarget-events) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Lukas Bombach |
| Maintainers | lukasbombach |

## Links

- npm: https://www.npmjs.com/package/react-shadow-dom-retarget-events
- Repository: https://github.com/LukasBombach/react-shadow-dom-retarget-events
- Homepage: https://github.com/LukasBombach/react-shadow-dom-retarget-events#readme
- Issues: https://github.com/LukasBombach/react-shadow-dom-retarget-events/issues
- npm.io page: https://npm.io/package/react-shadow-dom-retarget-events

## Recent versions

- 1.1.0 (latest) — 2021-07-21
- 1.0.11 — 2020-01-05
- 1.0.10 — 2019-05-21
- 1.0.9 — 2019-05-21
- 1.0.8 — 2017-12-19
- 1.0.7 — 2017-09-27
- 1.0.6 — 2017-09-27
- 1.0.5 — 2017-09-12
- 1.0.4 — 2017-08-25
- 1.0.3 — 2017-08-14
- 1.0.2 — 2017-08-14
- 1.0.1 — 2017-08-09
- 1.0.0 — 2017-08-09

## README

# 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](https://github.com/facebook/react/issues/10422).

## How to fix it

Luckily someone wrote [a workaround on Stack Overflow](https://stackoverflow.com/questions/37866237/click-event-not-firing-when-react-component-in-a-shadow-dom).
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`:

```jsx
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

---
_Source: https://npm.io/package/react-shadow-dom-retarget-events · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._