[@angular/animations] ViewEncapsulation.ShadowDom breaks Angular Animations #25672

nartc · 2018-08-25T21:47:42Z

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

As title mentioned, setting ViewEncapsulation.ShadowDom will cause the Animations not being able to run at all. Use-case: I'm building an Angular Element in conjunction with Angular Animations to see if the two play well together.

Expected behavior

Setting ShadowDom Encapsulation strategy should work with Angular Animations.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: 6.1.4


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 10.x  
- Platform:  Mac

Others:

The text was updated successfully, but these errors were encountered:

robwormald · 2018-09-05T21:49:43Z

triaged this with @matsko today, turns out this has never worked (!), even with the previous implementation of Shadow DOM. Definitely a bug.

sandeepsuvit · 2019-05-23T07:31:21Z

Any fixes for this?

bjornharvold · 2019-05-24T06:50:36Z

Yes, confirming. I have shadowdom on my web components and hammerjs specified in main.ts. Animations not working. If I remove shadowdom, animations work again.

quekqh · 2019-07-31T09:54:56Z

I was using primeng sidebar and there was a sliding animation to display the sidebar but the sliding animation to close the sidebar broke (cause I set my view encapsulation to shadow dom).

I restored the closing animation by inserting -webkit-transition: all 0.2s ease-in-out; I suspect webkit animations are somehow broken if view encapsulation shadow dom is added? Hope this helps someone!

graypegg · 2019-08-01T16:21:55Z

Can confirm we're seeing this as well, and our instance relies on a staggered animation so the work around is going to be messier than using the animations modules sadly :(

ghost · 2019-08-03T14:46:30Z

This is still an issue; I was using the shadowdom when trying to use Angular Elements and then realized that this was breaking it:

  encapsulation: ViewEncapsulation.ShadowDom,

It took quite a while to track that down, at this point if there isn't a fix there should be a console log error or something because it is something that can be detected within the component declaration

if (encapsulation != emulated && animations.length > 0) {
  console.log('animations may not work properly');
}

bjornharvold · 2019-08-13T07:41:22Z

Any update on this?

pigeonvictor · 2019-08-29T07:57:13Z

Same for me, animations not working on a encapsulation: ViewEncapsulation.ShadowDom,

sinedoOo · 2019-09-16T11:14:53Z

Same for my project. ShadowDom disables "transition" property. I've added manually in CSS transition filed and it's started working, but it's ugly and it's working only for very primitive animations. Any update for this issue?

alexeykostevich · 2019-09-30T08:10:31Z

Our team faced the same issue while building encapsulated Web Components for a browser extension.

Please, let me share some our findings — probably, this could be helpful to get this tricky issue fixed one day.

Angular Animations uses different mechanisms depending on a browser:

Web Animations is used for browsers that support Web Animations API.
CSS Keyframes is used as a fallback for other browsers.

Web Animations

When Web Animations is used, the issue is caused by the WebAnimationsDriver module. The module does not take into account shadow DOM in the implementation of the containsElement method.

angular/packages/animations/browser/src/render/web_animations/web_animations_driver.ts

Line 28 in 877f9ad

    
           containsElement(elm1: any, elm2: any): boolean { return containsElement(elm1, elm2); }

As a result, Angular thinks that elements inside shadow DOM are not presented on a page (but just in memory) and skips animation.

angular/packages/animations/browser/src/render/transition_animation_engine.ts

Line 973 in 877f9ad

    
           const nodeIsOrphaned = !bodyNode || !this.driver.containsElement(bodyNode, element);

CSS Keyframes

When CSS Keyframes is used, Angular inherits the same issue as with Web Animations (through some shared modules).

In addition to this, Angular adds generated CSS with keyframes to the <head> but not inside shadow DOM. As a result, these styles are not visible for Web Component elements.

angular/packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts

Line 107 in 877f9ad

document.querySelector('head') !.appendChild(kfElm);

Schibum · 2019-12-02T14:13:17Z

@alexeykostevich thx. This monkey-patch fixes it for the web animations case:

import { ɵWebAnimationsDriver } from '@angular/animations/browser';
ɵWebAnimationsDriver.prototype.containsElement = (el1: any, el2: any) => {
  // Travel up the tree to the root node.
  let elem = el2;
  while (elem && elem !== document.documentElement) {
    if (elem === el1)
      return true;
    elem = elem.parentNode || elem.host;
  }
  return false;
};

pianetarosso · 2020-02-05T13:58:04Z

Somebody knows how to apply the same solution for CSS Keyframes?

nrwinner · 2020-04-12T23:53:11Z

Can confirm this is still an issue in Angular 9

ray-kay · 2020-05-11T15:28:38Z

Angular Animations uses different mechanisms depending on a browser:

Web Animations is used for browsers that support Web Animations API.

CSS Keyframes is used as a fallback for other browsers.

Is there a way to force Angular to use Keyframes instead of Web Animations?

OssprO · 2020-08-14T00:11:24Z

Still an issue in Angular 10

SmadusankaB · 2020-12-10T03:38:35Z

Still an issue in Angular with the following versions.
"@angular/animations": "~10.0.2",
"@angular/cdk": "~10.1.3",
"@angular/common": "~10.0.2",
"@angular/compiler": "~10.0.2",
"@angular/core": "~10.0.2",

Closes angular#25672 Signed-off-by: jeripeierSBB <jeremias.peier@sbb.ch>

Closes angular#25672

enhanced AnimationDriver's containsElement method to not only use the native node contains-method but to walk up the DOM tree by also considering shadow elements. Fixing this allows animations to be played if they are placed inside a shadow DOM. Closes angular#25672

fbcarpinato · 2021-02-22T17:33:25Z

Still an issue on Angular 11

JustDoItSascha · 2021-03-23T10:11:24Z

Any updates on this?

petebacondarwin · 2021-03-23T13:34:16Z

I'm afraid there is no update on fixing this at the moment. I am at full capacity with getting the new linker stuff ready - but I will take a look at the linked PR when I get a chance. Perhaps early next week.

jezmaghuyop · 2021-04-05T14:39:15Z

just encountered the same issue on Angular 11, we are currently utilizing Angular elements which needed to be in a ShadowDom View Encapsulation. I've been trying to make a simple animation work for two days now only to find out that having our components in a ShadowDom is what breaking the animation.

this are my current versions

"@angular/animations": "^11.2.8", "@angular/cdk": "^11.2.3", "@angular/common": "~11.2.3", "@angular/compiler": "~11.2.3", "@angular/core": "~11.2.3", "@angular/elements": "^11.2.3",

When determining whether to run an animation, the `TransiationAnimationPlayer` 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

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

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 PR Close #40134

angular-automatic-lock-bot · 2021-05-16T16:08:04Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

IgorMinar added the area: animations label Sep 4, 2018

ngbot bot added this to the needsTriage milestone Sep 4, 2018

robwormald added type: bug/fix severity3: broken area: core Issues related to the framework runtime labels Sep 5, 2018

robwormald removed the area: core Issues related to the framework runtime label Sep 5, 2018

matsko added the freq3: high label Sep 27, 2018

ngbot bot modified the milestones: needsTriage, Backlog Sep 27, 2018

jelbourn added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed severity3: broken labels Oct 1, 2020

jeripeierSBB added a commit to jeripeierSBB/angular that referenced this issue Dec 15, 2020

fix(animations): allow animations in shadow DOM

571336e

Closes angular#25672 Signed-off-by: jeripeierSBB <jeremias.peier@sbb.ch>

jeripeierSBB mentioned this issue Dec 15, 2020

fix(animations): allow animations on elements in the shadow DOM #40134

Closed

13 tasks

jeripeierSBB added a commit to jeripeierSBB/angular that referenced this issue Dec 16, 2020

fix(animations): allow animations in shadow DOM

1586ce3

Closes angular#25672

LinboLen mentioned this issue Feb 20, 2021

bug happened when animations work with ng-content #24041

Open

petebacondarwin self-assigned this Mar 23, 2021

AndrewKushnir closed this as completed in a99aa29 Apr 15, 2021

angular-automatic-lock-bot bot locked and limited conversation to collaborators May 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[@angular/animations] ViewEncapsulation.ShadowDom breaks Angular Animations #25672

[@angular/animations] ViewEncapsulation.ShadowDom breaks Angular Animations #25672

nartc commented Aug 25, 2018

robwormald commented Sep 5, 2018

sandeepsuvit commented May 23, 2019

bjornharvold commented May 24, 2019

quekqh commented Jul 31, 2019 •

edited

graypegg commented Aug 1, 2019

ghost commented Aug 3, 2019

bjornharvold commented Aug 13, 2019

pigeonvictor commented Aug 29, 2019 •

edited

sinedoOo commented Sep 16, 2019

alexeykostevich commented Sep 30, 2019 •

edited

Schibum commented Dec 2, 2019

pianetarosso commented Feb 5, 2020

nrwinner commented Apr 12, 2020

ray-kay commented May 11, 2020

OssprO commented Aug 14, 2020

SmadusankaB commented Dec 10, 2020

fbcarpinato commented Feb 22, 2021

JustDoItSascha commented Mar 23, 2021

petebacondarwin commented Mar 23, 2021

jezmaghuyop commented Apr 5, 2021

angular-automatic-lock-bot bot commented May 16, 2021

[@angular/animations] ViewEncapsulation.ShadowDom breaks Angular Animations #25672

[@angular/animations] ViewEncapsulation.ShadowDom breaks Angular Animations #25672

Comments

nartc commented Aug 25, 2018

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

robwormald commented Sep 5, 2018

sandeepsuvit commented May 23, 2019

bjornharvold commented May 24, 2019

quekqh commented Jul 31, 2019 • edited

graypegg commented Aug 1, 2019

ghost commented Aug 3, 2019

bjornharvold commented Aug 13, 2019

pigeonvictor commented Aug 29, 2019 • edited

sinedoOo commented Sep 16, 2019

alexeykostevich commented Sep 30, 2019 • edited

Web Animations

CSS Keyframes

Schibum commented Dec 2, 2019

pianetarosso commented Feb 5, 2020

nrwinner commented Apr 12, 2020

ray-kay commented May 11, 2020

OssprO commented Aug 14, 2020

SmadusankaB commented Dec 10, 2020

fbcarpinato commented Feb 22, 2021

JustDoItSascha commented Mar 23, 2021

petebacondarwin commented Mar 23, 2021

jezmaghuyop commented Apr 5, 2021

angular-automatic-lock-bot bot commented May 16, 2021

quekqh commented Jul 31, 2019 •

edited

pigeonvictor commented Aug 29, 2019 •

edited

alexeykostevich commented Sep 30, 2019 •

edited