Doesn't work in the Shadow DOM

[rsuwa]

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?

[ljharb]

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.

[rsuwa]

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 onOutSideClick to be executed when you click outside of the Component.

[ljharb]

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).