Description

If we use AnimatePresence inside a shadow DOM, the popLayout features don't work. This is because we're unable to find the temporary styles added, because shadow dom won't apply styles found in document.head.

Code sandbox repro: https://codesandbox.io/p/sandbox/framer-motion-shadow-dom-f7gkk6?file=%2Fsrc%2FApp.js%3A89%2C2

4. Steps to reproduce

Steps to reproduce the behavior:

1. Open the code sandbox link
2. Click the example to run the animation. You'll notice the popLayout behavior is not occurring.
3. Uncomment line 86, skipping the shadow DOM.
4. popLayout starts working again.

Technical guess of the problem

From what I understand, popLayout works by applying a temporary class which positions an element as absolute during exit transition. This does not work in shadow DOMs due to the way the style is applied. I think the code here is adding the temporary class, but it's hardcoded to using document.head, which won't be available to the shadow dom.