Support for ShadowDOM

[fregante]

If I use a closed shadow DOM, the styles appended by Goober to the document’s head no longer reach it

const root = document.createElement("div");
document.body.append(root);
+ root.attachShadow({mode: "closed"})
render(<Toaster />, root);

Can you expose Goober’s target? https://github.com/cristianbote/goober/blob/e3f99e960a59d606fe7d4584383834465883ec8d/docs/docs/api/targets.md#L15

For example:

const root = document.createElement("div");
document.body.append(root);
root.attachShadow({mode: "closed"})
- render(<Toaster />, root);
+ render(<Toaster styleLocation={root} />, root);

Edit: Also asked in:

• Is it possible to change where the style sheets are injected?  #189

[fregante]

Can you expose Goober’s target? cristianbote/goober@e3f99e9/docs/docs/api/targets.md#L15

Rather, is it possible to automatically detect and use React’s root instead?

[kkosmowski]

what's the status on this one? It should be pretty straightforward to implement. Is there any other way I can tell react-hot-toast where to put the styles (that usually are added to document.head)?

[clintj42]

+1 on this. I'm seeing the same problem. The styles aren't getting applied in the shadow DOM. Any workarounds you guys are aware of?

[fregante]

Related issue upstream:

• Using styled in a Shadow DOM cristianbote/goober#482

[goldmont]

Same here

[meekr]

@fregante I cannot apply styles to shadow root even its mode is "open". Can you guide me how to do that?

[dimadolgopolovn]

Experiencing the same issue here.