Animations not working in the Shadow DOM

[charliemday]

0.17.0

The animations are not working in the Shadow DOM

Describe the bug
When I import MoonLoader into my Shadow DOM the component is rendered but the animation is stuck i.e. there is no animation

To Reproduce
Create a Shadow DOM and import MoonLoader

Expected behavior

The animation would work regardless of it being in a Shadow DOM.

Additional context

After some digging my guess is because createAnimation in https://github.com/davidhu2000/react-spinners/blob/main/src/helpers/animation.ts is appending the keyframes to the document.head and the purpose of a Shadow DOM is that it encapsulates the styles so doesn't have access to this keyframe?

If this is indeed a bug my initial suggestion would be for an optional prop to determine where the keyframe sheet is appended onto, I think you could just declare your Shadow DOM id?