search

Wildhoney / ReactShadow

:beginner: Utilise Shadow DOM in React with all the benefits of style encapsulation.
https://react-shadow.herokuapp.com/
MIT License
1.29k stars 80 forks source link

Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree #151

Open smikula opened 1 year ago

smikula commented 1 year ago

When doing some debugging in a related area, I noticed this error happening within react-shadow:

Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree

With some digging, it appears that the code attempts to attach the shadow DOM on every render of the component (in the useLayoutEffect here).

Fortunately things still seem to work in most cases because the error is caught and there's some code that tries again to apply the adopted style sheets, but I'm sure this isn't the intended behavior. Shouldn't you keep track of whether the shadow has been attached and only do it once?

I'm not preciesly sure what the best fix is for the problem, but if you want I can come up with a PR for it.

maus2maus commented 1 year ago

Yes, I found the same issue -- when the component is remounted by React 18. And in my case the code execution is abrupted despite there is a try-catch inside the library. Would be great to fix it