Shadow DOM support

[STiXzoOR]

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]

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

[scarletczen]

Facing the same issue. Looking forward to a solution.

[kurorinto]

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]

Thanks @kurorinto