[BUG] ReactTooltip isn't being rendered in Shadow DOM mode

[dsternlicht]

Describe the bug
My React app is being rendered in a Shadow DOM, ReactTooltip isn't working. If I'm disabling the Shadow DOM mode, it's working as expected.

Version of Package
v5.13.1

To Reproduce

• App.tsx

import { Tooltip as ReactTooltip } from 'react-tooltip';
import { StyledDiv } from './styles';

export const App = () => {
	return (
		<StyledDiv>
			<ReactTooltip
				id={`my-tooltip`}
				style={{ zIndex: 100, maxWidth: 300, fontSize: 13 }}
			/>
		</StyledDiv>
	);
};

• index.tsx

const shadowRoot = document.body.attachShadow({ mode: 'open' });
	
// create a root inside the shadow
const root = ReactDOM.createRoot(shadowRoot);

// Render the new widget
root.render(<App />);

Expected behavior
Placeholder element should appear in the dom. Tooltips should work.

Desktop (please complete the following information if possible or delete this section):

• OS: MacOS
• Browser Chrome
• Version latest
• Frameworks React 18.2.0, Next.js 13.1.1

[gabrieljablonski]

Can you please try react-tooltip@5.12.0?

v5.13.0 introduced automatic CSS injection for the default tooltip styling, so that might've broken this use case.

For this test you'll have to add the CSS import with:

import 'react-tooltip/dist/react-tooltip.css'

[dsternlicht]

@gabrieljablonski I've just tried that, still nothing. The placeholder doesn't even appears in the DOM.

[danielbarion]

@dsternlicht can you please provide a reproducible example of the issue? (can be a repository)

[dsternlicht]

@danielbarion there you go:
https://codesandbox.io/s/condescending-nightingale-dh3xe4?file=/src/App.js

In index.js if you try to change the root element to a simple div, the tooltip works.

[danielbarion]

@dsternlicht thanks, we will take a look as soon as possible.

[gabrieljablonski]

A few links I've skimmed through which have some interesting information:

https://www.wpeform.io/blog/render-react-app-shadow-dom-styled-components/
https://medium.com/rate-engineering/winning-the-war-of-css-conflicts-through-the-shadow-dom-de6c797b5cba
https://www.npmjs.com/package/react-shadow-dom-retarget-events

In summary, when using a shadow DOM, stuff inside it is pretty much isolated from the rest of the DOM, so doing stuff to components inside it (applying CSS, listening to events) is not transparent.

It doesn't seem like it would be too difficult to support it, but it's also not a trivial change.

Also not sure if completely relevant, but #636 seemed to deal with a similar problem in v4.

[dsternlicht]

@gabrieljablonski I believe that shadow DOM is pretty common nowadays, and it's worth supporting it if possible.

@danielbarion Can this be handled the same way it did in v4?

[danielbarion]

@dsternlicht I'll take a look as soon as I have time on your example and I'll let you know

[dsternlicht]

Thanks @danielbarion. If you can direct me to the right place I can try figure it out myself and PR it 🙂

[danielbarion]

Today we are injecting the styles through the rollup config, we will need to check if postcss has some support to shadow DOM injection or we will need to disable this option and inject the styles manually

I'm thinking in those 2 ways to try solve the issue with the shadow DOM

[dsternlicht]

@danielbarion injecting the styles manually will probably be much easier than interacting with rollup's config.

[danielbarion]

I tried the manual injection today but I was not able to inject the styles (CSS Module) as text into the style element inside shadow dom, I'll try to take a look more deeply when I have more time, but PRs are always welcome! 🙂

@dsternlicht if you have time, try to implement the style injection manually and make it work, don't worry about the best implementation, try to make it work as expected without breaking anything and we can help you to improve the code if needed.

[dsternlicht]

Thanks @danielbarion can you just direct me to the correct file that should handle it?

[danielbarion]

@dsternlicht I'm sorry for the delay, we probably will need to handle it in this file (Tooltip.tsx) because this is the place that we have the rendered node information