diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json
index b5ab7629ec..6ffc1a1e26 100755
--- a/goldens/size-tracking/aio-payloads.json
+++ b/goldens/size-tracking/aio-payloads.json
@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 3033,
-        "main-es2015": 452892,
+        "main-es2015": 453111,
         "polyfills-es2015": 55230
       }
     }
@@ -21,7 +21,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 3153,
-        "main-es2015": 438598,
+        "main-es2015": 438824,
         "polyfills-es2015": 55230
       }
     }
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 c4a6d20987..3c26a431d5 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
@@ -20,7 +20,6 @@ const TAB_SPACE = ' ';
 
 export class CssKeyframesDriver implements AnimationDriver {
   private _count = 0;
-  private readonly _head: any = document.querySelector('head');
 
   validateStyleProperty(prop: string): boolean {
     return validateStyleProperty(prop);
@@ -107,7 +106,8 @@ export class CssKeyframesDriver implements AnimationDriver {
 
     const animationName = `${KEYFRAMES_NAME_PREFIX}${this._count++}`;
     const kfElm = this.buildKeyframeElement(element, animationName, keyframes);
-    document.querySelector('head')!.appendChild(kfElm);
+    const nodeToAppendKfElm = findNodeToAppendKeyframeElement(element);
+    nodeToAppendKfElm.appendChild(kfElm);
 
     const specialStyles = packageNonAnimatableStyles(element, keyframes);
     const player = new CssKeyframesPlayer(
@@ -118,6 +118,14 @@ export class CssKeyframesDriver implements AnimationDriver {
   }
 }
 
+function findNodeToAppendKeyframeElement(element: any): Node {
+  const rootNode = element.getRootNode?.();
+  if (typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot) {
+    return rootNode;
+  }
+  return document.head;
+}
+
 function flattenKeyframesIntoStyles(keyframes: null|{[key: string]: any}|
                                     {[key: string]: any}[]): {[key: string]: any} {
   let flatKeyframes: {[key: string]: any} = {};
diff --git a/packages/animations/browser/src/render/shared.ts b/packages/animations/browser/src/render/shared.ts
index e2040f9aa1..f6356d39c1 100644
--- a/packages/animations/browser/src/render/shared.ts
+++ b/packages/animations/browser/src/render/shared.ts
@@ -160,10 +160,19 @@ let _query: (element: any, selector: string, multi: boolean) => any[] =
 // and utility methods exist.
 const _isNode = isNode();
 if (_isNode || typeof Element !== 'undefined') {
-  // this is well supported in all browsers
-  _contains = (elm1: any, elm2: any) => {
-    return elm1.contains(elm2) as boolean;
-  };
+  if (!isBrowser()) {
+    _contains = (elm1, elm2) => elm1.contains(elm2);
+  } else {
+    _contains = (elm1, elm2) => {
+      while (elm2 && elm2 !== document.documentElement) {
+        if (elm2 === elm1) {
+          return true;
+        }
+        elm2 = elm2.parentNode || elm2.host;  // consider host to support shadow DOM
+      }
+      return false;
+    };
+  }
 
   _matches = (() => {
     if (_isNode || Element.prototype.matches) {
diff --git a/packages/animations/browser/test/BUILD.bazel b/packages/animations/browser/test/BUILD.bazel
index 79b21d2ef2..cf52e08ab4 100644
--- a/packages/animations/browser/test/BUILD.bazel
+++ b/packages/animations/browser/test/BUILD.bazel
@@ -24,6 +24,7 @@ ts_library(
         "//packages/animations/browser/testing",
         "//packages/core",
         "//packages/core/testing",
+        "//packages/platform-browser/testing",
     ],
 )
 
diff --git a/packages/animations/browser/test/render/css_keyframes/css_keyframes_driver_spec.ts b/packages/animations/browser/test/render/css_keyframes/css_keyframes_driver_spec.ts
index c062712e8d..bf1f582db7 100644
--- a/packages/animations/browser/test/render/css_keyframes/css_keyframes_driver_spec.ts
+++ b/packages/animations/browser/test/render/css_keyframes/css_keyframes_driver_spec.ts
@@ -5,7 +5,9 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {fakeAsync, flushMicrotasks, TestBed} from '@angular/core/testing';
+import {fakeAsync, flushMicrotasks} from '@angular/core/testing';
+
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 
 import {CssKeyframesDriver} from '../../../src/render/css_keyframes/css_keyframes_driver';
 import {CssKeyframesPlayer} from '../../../src/render/css_keyframes/css_keyframes_player';
@@ -104,7 +106,7 @@ describe('CssKeyframesDriver tests', () => {
       expect(easing).toEqual('ease-out');
     });
 
-    it('should animate until the `animationend` method is emitted, but stil retain the <style> method and the element animation details',
+    it('should animate until the `animationend` method is emitted, but still retain the <style> method and the element animation details',
        fakeAsync(() => {
          // IE11 cannot create an instanceof AnimationEvent
          if (!supportsAnimationEventCreation()) return;
@@ -144,7 +146,7 @@ describe('CssKeyframesDriver tests', () => {
          assertElementExistsInDom(matchingStyleElm, true);
        }));
 
-    it('should animate until finish() is called, but stil retain the <style> method and the element animation details',
+    it('should animate until finish() is called, but still retain the <style> method and the element animation details',
        fakeAsync(() => {
          const elm = createElement();
          const animator = new CssKeyframesDriver();
@@ -295,7 +297,7 @@ describe('CssKeyframesDriver tests', () => {
        () => {
          // IE cannot modify the position of an animation...
          // note that this feature is only for testing purposes
-         if (isIE()) return;
+         if (browserDetection.isIE) return;
 
          const elm = createElement();
          elm.style.border = '1px solid black';
@@ -369,6 +371,32 @@ describe('CssKeyframesDriver tests', () => {
          expect(k2).toEqual({width: '400px', height: '400px', offset: 0.5});
          expect(k3).toEqual({width: '500px', height: '500px', offset: 1});
        });
+
+    if (browserDetection.supportsShadowDom) {
+      it('should append <style> in shadow DOM root element', fakeAsync(() => {
+           const hostElement = createElement();
+           const shadowRoot = hostElement.attachShadow({mode: 'open'});
+           const elementToAnimate = createElement();
+           shadowRoot.appendChild(elementToAnimate);
+           const animator = new CssKeyframesDriver();
+
+           assertExistingAnimationDuration(elementToAnimate, 0);
+           expect(shadowRoot.querySelector('style')).toBeFalsy();
+
+           const player = animator.animate(
+               elementToAnimate,
+               [
+                 {width: '0px', offset: 0},
+                 {width: '200px', offset: 1},
+               ],
+               1234, 0, 'ease-out');
+
+           player.play();
+
+           assertExistingAnimationDuration(elementToAnimate, 1234);
+           assertElementExistsInDom(shadowRoot.querySelector('style'), true);
+         }));
+    }
   });
 });
 
@@ -391,8 +419,3 @@ function parseElementAnimationStyle(element: any):
   const animationName = style.animationName;
   return {duration, delay, easing, animationName};
 }
-
-function isIE() {
-  // note that this only applies to older IEs (not edge)
-  return (window as any).document['documentMode'] ? true : false;
-}
diff --git a/packages/animations/browser/test/render/web_animations/web_animations_driver_spec.ts b/packages/animations/browser/test/render/web_animations/web_animations_driver_spec.ts
index 984b377c46..a6e2b54606 100644
--- a/packages/animations/browser/test/render/web_animations/web_animations_driver_spec.ts
+++ b/packages/animations/browser/test/render/web_animations/web_animations_driver_spec.ts
@@ -5,8 +5,9 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+
 import {CssKeyframesPlayer} from '../../../src/render/css_keyframes/css_keyframes_player';
-import {DOMAnimation} from '../../../src/render/web_animations/dom_animation';
 import {WebAnimationsDriver} from '../../../src/render/web_animations/web_animations_driver';
 import {WebAnimationsPlayer} from '../../../src/render/web_animations/web_animations_player';
 
@@ -49,6 +50,21 @@ import {WebAnimationsPlayer} from '../../../src/render/web_animations/web_animat
         expect(player instanceof WebAnimationsPlayer).toBeTruthy();
       });
     });
+
+    if (browserDetection.supportsShadowDom) {
+      describe('when animation is inside a shadow DOM', () => {
+        it('should consider an element inside the shadow DOM to be contained by the document body',
+           (() => {
+             const hostElement = createElement();
+             const shadowRoot = hostElement.attachShadow({mode: 'open'});
+             const elementToAnimate = createElement();
+             shadowRoot.appendChild(elementToAnimate);
+             document.body.appendChild(hostElement);
+             const animator = new WebAnimationsDriver();
+             expect(animator.containsElement(document.body, elementToAnimate)).toBeTrue();
+           }));
+      });
+    }
   });
 }
 
diff --git a/packages/core/test/linker/projection_integration_spec.ts b/packages/core/test/linker/projection_integration_spec.ts
index b6f43389c8..a0c6f3544e 100644
--- a/packages/core/test/linker/projection_integration_spec.ts
+++ b/packages/core/test/linker/projection_integration_spec.ts
@@ -10,6 +10,7 @@ import {CommonModule, ɵgetDOM as getDOM} from '@angular/common';
 import {Component, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, Injector, Input, NgModule, NO_ERRORS_SCHEMA, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 import {modifiedInIvy} from '@angular/private/testing';
 
@@ -490,7 +491,7 @@ describe('projection', () => {
     expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:TREE(2:)))');
   });
 
-  if (supportsShadowDOM()) {
+  if (browserDetection.supportsShadowDom) {
     it('should support shadow dom content projection and isolate styles per component', () => {
       TestBed.configureTestingModule({declarations: [SimpleShadowDom1, SimpleShadowDom2]});
       TestBed.overrideComponent(MainComp, {
@@ -1042,7 +1043,3 @@ class CmpA1 {
 })
 class CmpA2 {
 }
-
-function supportsShadowDOM(): boolean {
-  return typeof (<any>document.body).attachShadow !== 'undefined';
-}