Add webcomponentjs / lit element, allow custom schema in angular, and…

… add my-element hello world example

package.json

@@ -20,6 +20,8 @@
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "^6.0.0",
     "@angular/router": "^6.0.0",
+    "@polymer/lit-element": "^0.5.1",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
     "core-js": "^2.5.4",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"

src/app/app.component.html

@@ -1,4 +1,5 @@
 <!--The content below is only a placeholder and can be replaced.-->
+<my-element></my-element>
 <div style="text-align:center">
   <h1>
     Welcome to {{ title }}!

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import './my-element';
 
 import { AppComponent } from './app.component';
 
@@ -10,6 +11,7 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule
   ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/my-element.ts

@@ -0,0 +1,15 @@
+import '@webcomponents/webcomponentsjs/webcomponents-loader.js';
+import {LitElement, html} from '@polymer/lit-element';
+
+class MyElement extends LitElement {
+
+	static get properties() { return { mood: String }}
+
+	_render({mood}) {
+		return html`<style> .mood { color: green; } </style>
+			Web Components are <span class="mood">${mood}</span>!`;
+	}
+
+}
+
+customElements.define('my-element', MyElement);