Gathering detailed insights and metrics for @medamine7/react-shadow-dom-retarget-events
Gathering detailed insights and metrics for @medamine7/react-shadow-dom-retarget-events
Installations
npm install @medamine7/react-shadow-dom-retarget-eventsDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
14.17.1
NPM Version
6.14.13
Score
68.6
Supply Chain
83.3
Quality
75
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Languages
1
JavaScript
JavaScript (100%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
86 Stars
51 Commits
34 Forks
46 Watchers
3 Branches
15 Contributors
Updated on May 21, 2025
Maintainers
1
Package Meta Information
Latest Version
1.0.0
Package Id
@medamine7/react-shadow-dom-retarget-events@1.0.0
Unpacked Size
6.08 kB
Size
2.29 kB
File Count
3
NPM Version
6.14.13
Node Version
14.17.1
Published on
Apr 05, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
No dependencies detected.
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:
1import React from 'react'; 2import retargetEvents from 'react-shadow-dom-retarget-events'; 3 4class App extends React.Component { 5 render() { 6 return <div onClick={() => alert('I have been clicked')}>Click me</div>; 7 } 8} 9 10const proto = Object.create(HTMLElement.prototype, { 11 attachedCallback: { 12 value: function() { 13 const mountPoint = document.createElement('span'); 14 const shadowRoot = this.createShadowRoot(); 15 shadowRoot.appendChild(mountPoint); 16 ReactDOM.render(<App/>, mountPoint); 17 retargetEvents(shadowRoot); 18 } 19 } 20}); 21document.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
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
Found 6/22 approved changesets -- score normalized to 2
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 14 are checked with a SAST tool
Score
2.9
/10
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More