Shadow DOM support

Open derekrjones opened this issue 1 year ago • 1 comments

same issue with React Sonner https://github.com/emilkowalski/sonner/issues/361

styles are injected into <head> and are not applied to toasts within the shadowdom using Sonner as a slotted component means my custom styling, defined in shadowdom (eg. tailwind), won't get applied

Exporting styles.css would be sufficient. -- I could then manually inject into the shadow-root, or modify and inject into document head (as per suggested workaround https://github.com/emilkowalski/sonner/issues/361#issuecomment-2252102323 )

There are certainly other approaches, but I think exporting styles.css and let the developer deal with it, is likely the best (and simplest). Thanks.

(note: react sonner does export its styles)

Jan 25 '25 18:01 derekrjones

a simple workaround is

const toastStyleEl = document.head
  .querySelectorAll('style')
  .values()
  .find(style => style.textContent?.includes('[data-sonner-toaster]'));
if (toastStyleEl) shadowRoot.append(toastStyleEl);

imo this is good enough (feel free to close)

Jan 29 '25 23:01 derekrjones