stop using ng-content

Author: mmalerba

src/cdk/testing/tests/harnesses/main-component-harness.ts

@@ -82,7 +82,8 @@ export class MainComponentHarness extends ComponentHarness {
   readonly missingElementsAndHarnesses =
       this.locatorFor('.not-found', SubComponentHarness.with({title: /not found/}));
   readonly shadows = this.locatorForAll('.in-the-shadows');
-  readonly deepShadow = this.locatorFor('.in-the-shadows + test-shadow-boundary > .in-the-shadows');
+  readonly deepShadow = this.locatorFor(
+      '.in-the-shadows + test-sub-shadow-boundary > .in-the-shadows');
 
   private _testTools = this.locatorFor(SubComponentHarness);
 

src/cdk/testing/tests/test-components-module.ts

@@ -10,12 +10,12 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {TestMainComponent} from './test-main-component';
-import {TestShadowBoundary} from './test-shadow-boundary';
+import {TestShadowBoundary, TestSubShadowBoundary} from './test-shadow-boundary';
 import {TestSubComponent} from './test-sub-component';
 
 @NgModule({
   imports: [CommonModule, FormsModule],
-  declarations: [TestMainComponent, TestSubComponent, TestShadowBoundary],
-  exports: [TestMainComponent, TestSubComponent, TestShadowBoundary]
+  declarations: [TestMainComponent, TestSubComponent, TestShadowBoundary, TestSubShadowBoundary],
+  exports: [TestMainComponent, TestSubComponent, TestShadowBoundary, TestSubShadowBoundary]
 })
 export class TestComponentsModule {}

src/cdk/testing/tests/test-main-component.html

@@ -32,9 +32,4 @@ <h1 style="height: 100px; width: 200px;">Main Component</h1>
   </button>
   <span id="task-state-result" #taskStateResult></span>
 </div>
-<test-shadow-boundary *ngIf="_shadowDomSupported">
-  <div class="in-the-shadows">Shadow 1</div>
-  <test-shadow-boundary>
-    <div class="in-the-shadows">Shadow 2</div>
-  </test-shadow-boundary>
-</test-shadow-boundary>
+<test-shadow-boundary *ngIf="_shadowDomSupported"></test-shadow-boundary>

src/cdk/testing/tests/test-shadow-boundary.ts

@@ -10,9 +10,21 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
 
 @Component({
   selector: 'test-shadow-boundary',
-  template: '<ng-content></ng-content>',
+  template: `
+    <div class="in-the-shadows">Shadow 1</div>
+    <test-sub-shadow-boundary></test-sub-shadow-boundary>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:validate-decorators
   encapsulation: ViewEncapsulation.ShadowDom,
 })
 export class TestShadowBoundary {}
+
+@Component({
+  selector: 'test-sub-shadow-boundary',
+  template: '<div class="in-the-shadows">Shadow 2</div>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  // tslint:disable-next-line:validate-decorators
+  encapsulation: ViewEncapsulation.ShadowDom,
+})
+export class TestSubShadowBoundary {}

src/cdk/testing/tests/testbed.spec.ts

@@ -1,4 +1,4 @@
-import {_supportsShadowDom, Platform} from '@angular/cdk/platform';
+import {_supportsShadowDom} from '@angular/cdk/platform';
 import {
   ComponentHarness,
   ComponentHarnessConstructor,
@@ -503,9 +503,7 @@ describe('TestbedHarnessEnvironment', () => {
     });
   });
 
-  const platform = new Platform();
-  // Safari only has parial shadow DOM support (https://caniuse.com/#feat=shadowdomv1)
-  if (_supportsShadowDom() && !platform.SAFARI) {
+  if (_supportsShadowDom()) {
     describe('shadow DOM interaction', () => {
       it('should not pierce shadow boundary by default', async () => {
         const harness = await TestbedHarnessEnvironment