feat(core): remove ViewEncapsulation.Native (#38882)

Removes `ViewEncapsulation.Native` which has been deprecated for several major versions.

BREAKING CHANGES:
* `ViewEncapsulation.Native` has been removed. Use `ViewEncapsulation.ShadowDom` instead. Existing
usages will be updated automatically by `ng update`.

PR Close #38882

packages/platform-browser/src/dom/dom_renderer.ts

@@ -74,6 +74,8 @@ function decoratePreventDefault(eventHandler: Function): Function {
   };
 }
 
+let hasLoggedNativeEncapsulationWarning = false;
+
 @Injectable()
 export class DomRendererFactory2 implements RendererFactory2 {
   private rendererByCompId = new Map<string, Renderer2>();
@@ -100,8 +102,16 @@ export class DomRendererFactory2 implements RendererFactory2 {
         (<EmulatedEncapsulationDomRenderer2>renderer).applyToHost(element);
         return renderer;
       }
-      case ViewEncapsulation.Native:
+      case 1:
       case ViewEncapsulation.ShadowDom:
+        // TODO(FW-2290): remove the `case 1:` fallback logic and the warning in v12.
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
+            !hasLoggedNativeEncapsulationWarning && type.encapsulation === 1) {
+          hasLoggedNativeEncapsulationWarning = true;
+          console.warn(
+              'ViewEncapsulation.Native is no longer supported. Falling back to ViewEncapsulation.ShadowDom. The fallback will be removed in v12.');
+        }
+
         return new ShadowDomRenderer(this.eventManager, this.sharedStylesHost, element, type);
       default: {
         if (!this.rendererByCompId.has(type.id)) {
@@ -302,13 +312,9 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
 
   constructor(
       eventManager: EventManager, private sharedStylesHost: DomSharedStylesHost,
-      private hostEl: any, private component: RendererType2) {
+      private hostEl: any, component: RendererType2) {
     super(eventManager);
-    if (component.encapsulation === ViewEncapsulation.ShadowDom) {
-      this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});
-    } else {
-      this.shadowRoot = (hostEl as any).createShadowRoot();
-    }
+    this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});
     this.sharedStylesHost.addHost(this.shadowRoot);
     const styles = flattenStyles(component.id, component.styles, []);
     for (let i = 0; i < styles.length; i++) {

packages/platform-browser/test/dom/dom_renderer_spec.ts

@@ -20,8 +20,8 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
     beforeEach(() => {
       TestBed.configureTestingModule({
         declarations: [
-          TestCmp, SomeApp, CmpEncapsulationEmulated, CmpEncapsulationNative, CmpEncapsulationNone,
-          CmpEncapsulationNative
+          TestCmp, SomeApp, CmpEncapsulationEmulated, CmpEncapsulationShadow, CmpEncapsulationNone,
+          CmpEncapsulationShadow
         ]
       });
       renderer = TestBed.createComponent(TestCmp).componentInstance.renderer;
@@ -98,16 +98,14 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
       });
     });
 
-    if (browserDetection.supportsDeprecatedShadowDomV0) {
+    if (browserDetection.supportsShadowDom) {
       it('should allow to style components with emulated encapsulation and no encapsulation inside of components with shadow DOM',
          () => {
            const fixture = TestBed.createComponent(SomeApp);
+           const cmp = fixture.debugElement.query(By.css('cmp-shadow')).nativeElement;
+           const shadow = cmp.shadowRoot.querySelector('.shadow');
 
-           const cmp = fixture.debugElement.query(By.css('cmp-native')).nativeElement;
-
-
-           const native = cmp.shadowRoot.querySelector('.native');
-           expect(window.getComputedStyle(native).color).toEqual('rgb(255, 0, 0)');
+           expect(window.getComputedStyle(shadow).color).toEqual('rgb(255, 0, 0)');
 
            const emulated = cmp.shadowRoot.querySelector('.emulated');
            expect(window.getComputedStyle(emulated).color).toEqual('rgb(0, 0, 255)');
@@ -119,15 +117,6 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
   });
 }
 
-@Component({
-  selector: 'cmp-native',
-  template: `<div class="native"></div><cmp-emulated></cmp-emulated><cmp-none></cmp-none>`,
-  styles: [`.native { color: red; }`],
-  encapsulation: ViewEncapsulation.Native
-})
-class CmpEncapsulationNative {
-}
-
 @Component({
   selector: 'cmp-emulated',
   template: `<div class="emulated"></div>`,
@@ -149,7 +138,7 @@ class CmpEncapsulationNone {
 @Component({
   selector: 'cmp-shadow',
   template: `<div class="shadow"></div><cmp-emulated></cmp-emulated><cmp-none></cmp-none>`,
-  styles: [`.native { color: red; }`],
+  styles: [`.shadow { color: red; }`],
   encapsulation: ViewEncapsulation.ShadowDom
 })
 class CmpEncapsulationShadow {
@@ -158,7 +147,7 @@ class CmpEncapsulationShadow {
 @Component({
   selector: 'some-app',
   template: `
-	  <cmp-native></cmp-native>
+	  <cmp-shadow></cmp-shadow>
 	  <cmp-emulated></cmp-emulated>
 	  <cmp-none></cmp-none>
   `,

packages/platform-browser/test/dom/shadow_dom_spec.ts

@@ -15,13 +15,11 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
 
 if (browserDetection.supportsShadowDom) {
   describe('ShadowDOM Support', () => {
-    let testContainer: HTMLDivElement;
-
     beforeEach(() => {
       TestBed.configureTestingModule({imports: [TestModule]});
     });
 
-    it('should attach and use a shadowRoot when ViewEncapsulation.Native is set', () => {
+    it('should attach and use a shadowRoot when ViewEncapsulation.ShadowDom is set', () => {
       const compEl = TestBed.createComponent(ShadowComponent).nativeElement;
       expect(compEl.shadowRoot!.textContent).toEqual('Hello World');
     });

packages/platform-browser/testing/src/matchers.ts

@@ -305,8 +305,14 @@ function elementText(n: any): string {
     return '';
   }
 
-  if (getDOM().isElementNode(n) && (n as Element).tagName == 'CONTENT') {
-    return elementText(Array.prototype.slice.apply((<any>n).getDistributedNodes()));
+  if (getDOM().isElementNode(n)) {
+    const tagName = (n as Element).tagName;
+
+    if (tagName === 'CONTENT') {
+      return elementText(Array.prototype.slice.apply((<any>n).getDistributedNodes()));
+    } else if (tagName === 'SLOT') {
+      return elementText(Array.prototype.slice.apply((<any>n).assignedNodes()));
+    }
   }
 
   if (hasShadowRoot(n)) {