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/core/src/compiler/compiler_facade_interface.ts

@@ -173,7 +173,7 @@ export interface R3FactoryDefMetadataFacade {
 
 export enum ViewEncapsulation {
   Emulated = 0,
-  Native = 1,
+  // Historically the 1 value was for `Native` encapsulation which has been removed as of v11.
   None = 2,
   ShadowDom = 3
 }

packages/core/src/metadata/directives.ts

@@ -518,7 +518,6 @@ export interface Component extends Directive {
 
   /**
    * An encapsulation policy for the template and CSS styles. One of:
-   * - `ViewEncapsulation.Native`: Deprecated. Use `ViewEncapsulation.ShadowDom` instead.
    * - `ViewEncapsulation.Emulated`: Use shimmed CSS that
    * emulates the native behavior.
    * - `ViewEncapsulation.None`: Use global CSS without any

packages/core/src/metadata/view.ts

@@ -28,15 +28,9 @@ export enum ViewEncapsulation {
    * This is the default option.
    */
   Emulated = 0,
-  /**
-   * @deprecated v6.1.0 - use {ViewEncapsulation.ShadowDom} instead.
-   * Use the native encapsulation mechanism of the renderer.
-   *
-   * For the DOM this means using the deprecated [Shadow DOM
-   * v0](https://w3c.github.io/webcomponents/spec/shadow/) and
-   * creating a ShadowRoot for Component's Host Element.
-   */
-  Native = 1,
+
+  // Historically the 1 value was for `Native` encapsulation which has been removed as of v11.
+
   /**
    * Don't provide any template or style encapsulation.
    */

packages/core/src/render3/node_manipulation.ts

@@ -517,8 +517,8 @@ function getRenderParent(tView: TView, tNode: TNode, currentView: LView): REleme
       // Since the projection would then move it to its final destination. Note that we can't
       // make this assumption when using the Shadow DOM, because the native projection placeholders
       // (<content> or <slot>) have to be in place as elements are being inserted.
-      if (encapsulation !== ViewEncapsulation.ShadowDom &&
-          encapsulation !== ViewEncapsulation.Native) {
+      if (encapsulation === ViewEncapsulation.None ||
+          encapsulation === ViewEncapsulation.Emulated) {
         return null;
       }
     }

packages/core/src/view/util.ts

@@ -230,7 +230,10 @@ export function getParentRenderElement(view: ViewData, renderHost: any, def: Nod
     if ((renderParent.flags & NodeFlags.TypeElement) === 0 ||
         (renderParent.flags & NodeFlags.ComponentView) === 0 ||
         (renderParent.element!.componentRendererType &&
-         renderParent.element!.componentRendererType!.encapsulation === ViewEncapsulation.Native)) {
+         (renderParent.element!.componentRendererType!.encapsulation ===
+              ViewEncapsulation.ShadowDom ||
+          // TODO(FW-2290): remove the `encapsulation === 1` fallback logic in v12.
+          renderParent.element!.componentRendererType!.encapsulation === 1))) {
       // only children of non components, or children of components with native encapsulation should
       // be attached.
       return asElementData(view, def.renderParent!.nodeIndex).renderElement;

packages/core/test/linker/projection_integration_spec.ts

@@ -490,13 +490,13 @@ describe('projection', () => {
     expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:TREE(2:)))');
   });
 
-  if (supportsNativeShadowDOM()) {
-    it('should support native content projection and isolate styles per component', () => {
-      TestBed.configureTestingModule({declarations: [SimpleNative1, SimpleNative2]});
+  if (supportsShadowDOM()) {
+    it('should support shadow dom content projection and isolate styles per component', () => {
+      TestBed.configureTestingModule({declarations: [SimpleShadowDom1, SimpleShadowDom2]});
       TestBed.overrideComponent(MainComp, {
         set: {
-          template: '<simple-native1><div>A</div></simple-native1>' +
-              '<simple-native2><div>B</div></simple-native2>'
+          template: '<simple-shadow-dom1><div>A</div></simple-shadow-dom1>' +
+              '<simple-shadow-dom2><div>B</div></simple-shadow-dom2>'
         }
       });
       const main = TestBed.createComponent(MainComp);
@@ -857,21 +857,21 @@ class Simple {
 }
 
 @Component({
-  selector: 'simple-native1',
-  template: 'SIMPLE1(<content></content>)',
-  encapsulation: ViewEncapsulation.Native,
+  selector: 'simple-shadow-dom1',
+  template: 'SIMPLE1(<slot></slot>)',
+  encapsulation: ViewEncapsulation.ShadowDom,
   styles: ['div {color: red}']
 })
-class SimpleNative1 {
+class SimpleShadowDom1 {
 }
 
 @Component({
-  selector: 'simple-native2',
-  template: 'SIMPLE2(<content></content>)',
-  encapsulation: ViewEncapsulation.Native,
+  selector: 'simple-shadow-dom2',
+  template: 'SIMPLE2(<slot></slot>)',
+  encapsulation: ViewEncapsulation.ShadowDom,
   styles: ['div {color: blue}']
 })
-class SimpleNative2 {
+class SimpleShadowDom2 {
 }
 
 @Component({selector: 'empty', template: ''})
@@ -1043,6 +1043,6 @@ class CmpA1 {
 class CmpA2 {
 }
 
-function supportsNativeShadowDOM(): boolean {
-  return typeof (<any>document.body).createShadowRoot === 'function';
+function supportsShadowDOM(): boolean {
+  return typeof (<any>document.body).attachShadow !== 'undefined';
 }