Skip to content

Commit

Permalink
fixup! fix(animations): allow animations on elements in the shadow DOM
Browse files Browse the repository at this point in the history
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 angular#25672
  • Loading branch information
jeripeierSBB committed Apr 9, 2021
1 parent 46feaf3 commit 9fb0b28
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions goldens/size-tracking/aio-payloads.json
Expand Up @@ -12,7 +12,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 3033,
"main-es2015": 452289,
"main-es2015": 452203,
"polyfills-es2015": 52215
}
}
Expand All @@ -21,7 +21,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 3153,
"main-es2015": 437924,
"main-es2015": 437844,
"polyfills-es2015": 52493
}
}
Expand Down

0 comments on commit 9fb0b28

Please sign in to comment.