From 6d85b7fc1006519afd27d4a2e89c6b3134305c97 Mon Sep 17 00:00:00 2001 From: jeripeierSBB Date: Fri, 9 Apr 2021 09:17:27 +0200 Subject: [PATCH] fixup! fix(animations): allow animations on elements in the shadow DOM When determining whether to run an animation, the `TransitionAnimationPlayer` checks to see if a DOM element is attached to the document. This is done by checking to see if the element is "contained" by the document body node. Previously, if the element was inside a shadow DOM, the engine would determine that the element was not attached, even if the shadow DOM's host was attached to the document. This commit updates the `containsElement()` method on `AnimationDriver` implementations to also include shadow DOM elements as being contained if their shadow host element is contained. Further, when using CSS keyframes to trigger animations, the styling was always added to the `head` element of the document, even for animations on elements within a shadow DOM. This meant that those elements never receive those styles and the animation would not run. This commit updates the insertion of these styles so that they are added, to the element's "root node", which is the nearest shadow DOM host, or the `head` of the document if the element is not in a shadow DOM. Closes #25672 --- .../render/css_keyframes/css_keyframes_driver.ts | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts b/packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts index e60022b77acf8..3c26a431d5192 100644 --- a/packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts +++ b/packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts @@ -106,7 +106,7 @@ export class CssKeyframesDriver implements AnimationDriver { const animationName = `${KEYFRAMES_NAME_PREFIX}${this._count++}`; const kfElm = this.buildKeyframeElement(element, animationName, keyframes); - const nodeToAppendKfElm = findNodeToAppendKfElm(element); + const nodeToAppendKfElm = findNodeToAppendKeyframeElement(element); nodeToAppendKfElm.appendChild(kfElm); const specialStyles = packageNonAnimatableStyles(element, keyframes); @@ -118,16 +118,12 @@ export class CssKeyframesDriver implements AnimationDriver { } } -// TODO: Once we drop IE 11 support, method can be simplified -// to the native browser function `getRootNode` -function findNodeToAppendKfElm(element: any): Node { - while (element && element !== document.documentElement) { - if (element.shadowRoot) { - return element.shadowRoot; - } - element = element.parentNode || element.host; +function findNodeToAppendKeyframeElement(element: any): Node { + const rootNode = element.getRootNode?.(); + if (typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot) { + return rootNode; } - return document.querySelector('head')!; + return document.head; } function flattenKeyframesIntoStyles(keyframes: null|{[key: string]: any}|