Angular 1.x ngAnimate in Shadow DOM doesn't register animation times or add enter/leave classes

I’ve been trying to work out solutions for a few hours now – all the duplicates in SO don’t seem to work for me as they mostly recommend either trying different versions of ng-animate/angular or adding the transition/animation in the relevant classes so that ngAnimate can handle their timings right.

My problem is that all of this was working, and I had all the properties in the correct locations – but now I am migrating our Chrome extension to work under a Shadow DOM encapsulation.

Notes:

  • Shadow DOM is probably the culprit, but I’m not sure why or how to fix it. It might also be irrelevant or only play a minor part in the actual problem (it is probably due to bad DOM handling in Shadow DOM + angular)
  • I am bootstrapping my app manually later in the lifecycle of the extension injection since it is supposed to only start up after a callback. This might also be the culprit

Here are the relevant styles:

.view-container {
  position: absolute;
  top: 70px;
  bottom: 0;
  background: white;
  transition: all 0.4s 0.2s ease-in-out;
  overflow-y: hidden;
  // slide animation
  &,
  &.ng-hide-remove,
  &.ng-hide-remove-active {
    max-height: 500px;
  }

  &.ng-hide {
    max-height: 0;
  }
}

Here is the template:

<div ng-show="rchCtrl.view == 'flag'"
  class="view-container">
  <div ng-include="'/templates/extension/article-flag-form.html'"
    ng-if="rchCtrl.view == 'flag'"
    ng-controller="ArticleFlagCtrl as flg"
    class="article-flag"></div>
</div>

Bower file:

"dependencies": {
    "jquery": "^2.2.1",
    "trackjs": "^2.8.3",
    "angular": "^1.6.0",
    "qtip2": "^2.2.1",
    "ng-qtip2": "1.3.3",
    "angular-ui-router": "^0.2.18",
    "angular-cookies": "^1.6.0",
    "angular-resource": "^1.6.0",
    "bootstrap": "^3.3.7",
    "angular-animate": "^1.6.0"
  },
  "resolutions": {
    "angular": "1.6.6"
  }

My angular init section:

app = angular.module(APP_NAME, ['template-cache', 'ui.router', 'ngCookies', 'geCommon', 'ngAnimate'])

// ...

angular.bootstrap(shadow.querySelector('#ge-ext'), [ APP_NAME ], { debugInfoEnabled: true })
angular.resumeBootstrap()

But after all this, the intermediate classes are never added/removed, and the animation isn’t working – hide/show display is immediate.