Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shadow DOM support #361

Open
STiXzoOR opened this issue Mar 4, 2024 · 4 comments
Open

Shadow DOM support #361

STiXzoOR opened this issue Mar 4, 2024 · 4 comments

Comments

@STiXzoOR
Copy link

STiXzoOR commented Mar 4, 2024

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.

@STiXzoOR STiXzoOR changed the title [Feature] Shadow DOM support Shadow DOM support Mar 4, 2024
@kurorinto
Copy link

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

@scarletczen
Copy link

Facing the same issue. Looking forward to a solution.

@kurorinto
Copy link

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
Copy link

Thanks @kurorinto

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants