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

[nartc]

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:

[robwormald]

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

[sandeepsuvit]

Any fixes for this?

[bjornharvold]

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]

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]

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 :(

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');
}