Add custom DOM element prop for injecting styles when using AnimatePresence with mode === popLayout

By default this was using document.head, but that is not always available to where it's rendered,
e.g. when using the shadow DOM. Instead, pass the shadow root to the new `parentDOM` prop

Author: tehbelinda

CHANGELOG.md

@@ -4,11 +4,6 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
-## [11.11.9] 2024-10-15
-
-### Changed
-
--   `will-change` is now no longer automatically managed without `useWillChange`.
 
 ## [11.11.8] 2024-10-11
 

packages/framer-motion/src/components/AnimatePresence/PopChild.tsx

@@ -15,6 +15,7 @@ interface Size {
 interface Props {
     children: React.ReactElement
     isPresent: boolean
+    parentDom?: HTMLElement | ShadowRoot
 }
 
 interface MeasureProps extends Props {
@@ -50,7 +51,7 @@ class PopChildMeasure extends React.Component<MeasureProps> {
     }
 }
 
-export function PopChild({ children, isPresent }: Props) {
+export function PopChild({ children, isPresent, parentDom = document.head }: Props) {
     const id = useId()
     const ref = useRef<HTMLElement>(null)
     const size = useRef<Size>({
@@ -78,7 +79,7 @@ export function PopChild({ children, isPresent }: Props) {
 
         const style = document.createElement("style")
         if (nonce) style.nonce = nonce
-        document.head.appendChild(style)
+        parentDom.appendChild(style)
         if (style.sheet) {
             style.sheet.insertRule(`
           [data-motion-pop-id="${id}"] {
@@ -92,7 +93,7 @@ export function PopChild({ children, isPresent }: Props) {
         }
 
         return () => {
-            document.head.removeChild(style)
+            parentDom.removeChild(style)
         }
     }, [isPresent])
 

packages/framer-motion/src/components/AnimatePresence/PresenceChild.tsx

@@ -18,6 +18,7 @@ interface PresenceChildProps {
     custom?: any
     presenceAffectsLayout: boolean
     mode: "sync" | "popLayout" | "wait"
+    parentDom?: HTMLElement | ShadowRoot
 }
 
 export const PresenceChild = ({
@@ -28,6 +29,7 @@ export const PresenceChild = ({
     custom,
     presenceAffectsLayout,
     mode,
+    parentDom
 }: PresenceChildProps) => {
     const presenceChildren = useConstant(newChildrenMap)
     const id = useId()
@@ -83,7 +85,7 @@ export const PresenceChild = ({
     }, [isPresent])
 
     if (mode === "popLayout") {
-        children = <PopChild isPresent={isPresent}>{children}</PopChild>
+        children = <PopChild isPresent={isPresent} parentDom={parentDom}>{children}</PopChild>
     }
 
     return (

packages/framer-motion/src/components/AnimatePresence/__tests__/AnimatePresence.test.tsx

@@ -346,6 +346,39 @@ describe("AnimatePresence", () => {
         return await expect(promise).resolves.toBe(3)
     })
 
+    test("Can cycle through multiple components with mode === 'popLayout' and dom", async () => {
+        const promise = new Promise<number>((resolve) => {
+            const Component = ({ i }: { i: number }) => {
+                const testDom = document.createElement('div')
+                document.body.appendChild(testDom)
+                return (
+                    <AnimatePresence mode="popLayout" parentDom={testDom}>
+                        <motion.div
+                            key={i}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            transition={{ duration: 0.5 }}
+                        />
+                    </AnimatePresence>
+                )
+            }
+
+            const { container, rerender } = render(<Component i={0} />)
+            rerender(<Component i={0} />)
+            setTimeout(() => {
+                rerender(<Component i={1} />)
+                rerender(<Component i={1} />)
+            }, 50)
+            setTimeout(() => {
+                rerender(<Component i={2} />)
+                rerender(<Component i={2} />)
+                resolve(container.childElementCount)
+            }, 400)
+        })
+
+        return await expect(promise).resolves.toBe(3)
+    })
+
     test("Only renders one child at a time if mode === 'wait'", async () => {
         const promise = new Promise<number>((resolve) => {
             const Component = ({ i }: { i: number }) => {

packages/framer-motion/src/components/AnimatePresence/index.tsx

@@ -53,6 +53,7 @@ export const AnimatePresence: React.FunctionComponent<
     onExitComplete,
     presenceAffectsLayout = true,
     mode = "sync",
+    parentDom,
 }) => {
     invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'")
 
@@ -207,6 +208,7 @@ export const AnimatePresence: React.FunctionComponent<
                         custom={isPresent ? undefined : custom}
                         presenceAffectsLayout={presenceAffectsLayout}
                         mode={mode}
+                        parentDom={parentDom}
                         onExitComplete={isPresent ? undefined : onExit}
                     >
                         {child}

packages/framer-motion/src/components/AnimatePresence/types.ts

@@ -61,6 +61,12 @@ export interface AnimatePresenceProps {
      */
     mode?: "sync" | "popLayout" | "wait"
 
+    /**
+     * Parent DOM element used when injecting styles, used when mode === `"popLayout"`.
+     * This defaults to document.head but can be overridden e.g. for use in shadow DOM.
+     */
+    parentDom?: HTMLElement | ShadowRoot;
+
     /**
      * Internal. Used in Framer to flag that sibling children *shouldn't* re-render as a result of a
      * child being removed.