feat(elements): enable Shadow DOM v1 and slots (#24861)

When using ViewEncapsulation.ShadowDom, Angular will not remove the child nodes of the DOM node a root Component is bootstrapped into. This enables developers building Angular Elements to use the `<slot>` element to do native content projection.

PR Close #24861

integration/ng_elements/e2e/app.e2e-spec.ts

@@ -9,7 +9,7 @@ describe('Element E2E Tests', function () {
       expect(helloWorldEl.getText()).toEqual('Hello World!');
     });
 
-    it('should display: Hello fromIndex! via name attribute', function () {
+    it('should display: Hello Foo! via name attribute', function () {
       browser.get('hello-world.html');
       const helloWorldEl = element(by.css('hello-world-el'));
       const input = element(by.css('input[type=text]'));

integration/ng_elements/package.json

@@ -29,5 +29,6 @@
     "serve": "lite-server -c e2e/browser.config.json",
     "preprotractor": "tsc -p e2e",
     "protractor": "protractor e2e/protractor.config.js"
-  }
+  },
+  "private": true
 }

integration/ng_elements/src/app.ts

@@ -1,8 +1,8 @@
-import {HelloWorldComponent, HelloWorldShadowComponent, TestCardComponent} from './elements';
-
-import {NgModule, Injector} from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
+import {Injector, NgModule} from '@angular/core';
 import {createCustomElement} from '@angular/elements';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {HelloWorldComponent, HelloWorldShadowComponent, TestCardComponent} from './elements';
 
 
 @NgModule({
@@ -11,23 +11,13 @@ import {createCustomElement} from '@angular/elements';
   imports: [BrowserModule],
 })
 export class AppModule {
-  constructor(private injector:Injector){
+  constructor(private injector: Injector) {
+    customElements.define('hello-world-el', createCustomElement(HelloWorldComponent, {injector}));
     customElements.define(
-      'hello-world-el',
-      createCustomElement(HelloWorldComponent, {injector})
-    );
-    customElements.define(
-      'hello-world-shadow-el',
-      createCustomElement(HelloWorldShadowComponent, {injector})
-    );
-    customElements.define(
-      'test-card',
-      createCustomElement(HelloWorldShadowComponent, {injector})
-    );
-  }
-  ngDoBootstrap(){
-
+        'hello-world-shadow-el', createCustomElement(HelloWorldShadowComponent, {injector}));
+    customElements.define('test-card', createCustomElement(TestCardComponent, {injector}));
   }
+  ngDoBootstrap() {}
 }
 
 export {HelloWorldComponent};

integration/ng_elements/src/elements.ts

@@ -32,5 +32,4 @@ export class HelloWorldShadowComponent {
   styles: []
 })
 export class TestCardComponent {
-
 }

integration/ng_elements/tsconfig.json

@@ -8,10 +8,8 @@
   "compilerOptions": {
     "module": "es2015",
     "moduleResolution": "node",
-    // TODO(i): strictNullChecks should turned on but are temporarily disabled due to #15432
-    "strictNullChecks": false,
-    "target": "es6",
-    "noImplicitAny": false,
+    "strictNullChecks": true,
+    "target": "es2015",
     "sourceMap": false,
     "experimentalDecorators": true,
     "outDir": "built",
@@ -27,4 +25,4 @@
     "dist",
     "e2e"
   ]
-}
+}