search

emilkowalski / sonner

An opinionated toast component for React.
https://sonner.emilkowal.ski
MIT License
7.98k stars 248 forks source link

Shadow DOM support #361

Open STiXzoOR opened 5 months ago

STiXzoOR commented 5 months ago

Describe the feature / bug 📝:

I have a project where i use sonner in a web extension, but recently I moved the rendering to the shadow dom. Then I noticed that the toasts where not rendering as they were suppose to. After checking the source code and styles, it seems that the styles are loaded in the document's head and therefore in the shadow dom are not available.

Steps to reproduce the bug 🔁:

Render toasts in shadow dom. Styles are missing from the components.

As a workaround i copied the styles to my codebase and i load them manually, but it would be a great if we have the styles available as a loadable file instead of loading them automatically to have more control over where we want to load them.

kurorinto commented 2 months ago

I also encountered this problem. It should be the problem of tailwind. Have you solved it?

scarletczen commented 1 month ago

Facing the same issue. Looking forward to a solution.

kurorinto commented 1 week ago

Facing the same issue. Looking forward to a solution.

I solved it, the solution is to add components'style and twcss to ShadowDOM.

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
    .replaceAll(":root", ":root,:host(plasmo-csui)")
    .concat(sonnerCssText)
  return style
}

view details: https://github.com/kurorinto/rozone/blob/main/src/contents/index.tsx#L14

scarletczen commented 1 week ago

Thanks @kurorinto