-
Notifications
You must be signed in to change notification settings - Fork 65
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Doesn't work in the Shadow DOM #43
Comments
I'm not sure what you mean; can you share some code? Either way, this component works based on event bubbling, and I suspect events won't bubble past a shadow DOM boundary. |
Sorry for the lack of explanation. I need to use the shadow DOM to create the chrome extension, and I use react-shadow to do this. import React, { useState, useEffect } from 'react';
import root from 'react-shadow';
import OutsideClickHandler from 'react-outside-click-handler';
import { Component } from './component';
const App = () => {
return (
<root.div>
<OutsideClickHandler
onOutsideClick={() => {
// e.g.) close component
}}
>
<Component />
</OutsideClickHandler>
</root.div>
);
}; If the code looks like the above, I want |
I don't think that's possible; OutsideClickHandler works via event bubbling, and the shadow DOM (i believe) disrupts that. In other words, you'd have to, totally separately, install a click listener on the outer document body (ie, conceptually "wrap" it with OutsideClickHandler). |
I'm adding an element under the shadow root in the chrome extension, but in that case, the element in the shadow DOM is determined to be outside.
How can I deal with this problem?
The text was updated successfully, but these errors were encountered: