new-webpack-4-vscode

diff --git a/app/app.html b/app/app.html
index be09420..63393a1 100644
--- a/app/app.html
+++ b/app/app.html
@@ -1 +1,6 @@
-<div>App running</div>
\ No newline at end of file
+<app-root>
+    <div class="flex-horiz">
+        <div>col1</div>
+        <div>col2</div>
+    </div>
+</app-root>
\ No newline at end of file

diff --git a/app/app.less b/app/app.less
index 99a6c65..c300b66 100644
--- a/app/app.less
+++ b/app/app.less
@@ -1,3 +1,34 @@
-body {
-    background: aqua;
+html, body, body > * {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.flex-horiz {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+
+.flex-vert {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+
+.flex-horiz > *, .flex-vert > * {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 1px;
+}
+
+.flex-horiz .flex-shrink, .flex-vert .flex-shrink {
+    flex-grow: 0;
+    flex-shrink: 1;
+}
+
+.flex-horiz .flex-grow, .flex-vert .flex-grow {
+    flex-grow: 1;
+    flex-shrink: 0;
 }
\ No newline at end of file

diff --git a/app/boot.ts b/app/boot.ts
index 160754a..6147d10 100644
--- a/app/boot.ts
+++ b/app/boot.ts
@@ -1,7 +1,10 @@
 import './app.less';
 import bootHtml from './app.html';
+import { AppRoot } from './elements/app-root/app-root';
 
-var appEle = document.createElement("app-root");
+window.customElements.define('app-root', AppRoot);
+
+var appEle = document.createElement("div");
 appEle.innerHTML = bootHtml;
 
 document.body.appendChild(appEle);
\ No newline at end of file

diff --git a/app/elements/_base.ts b/app/elements/_base.ts
new file mode 100644
index 0000000..990f448
--- /dev/null
+++ b/app/elements/_base.ts
@@ -0,0 +1,18 @@
+export class BaseElement extends HTMLElement {
+    private _hasConnectedCallback: boolean = false;
+    connectedCallback() {
+
+        if (!this._hasConnectedCallback) {
+            this.onInit();
+        }
+        else {
+            this.onUpdate();
+        }
+
+        this._hasConnectedCallback = true;
+
+    }
+
+    onInit() { }
+    onUpdate() { }
+}
\ No newline at end of file

diff --git a/app/elements/app-root/app-root.less b/app/elements/app-root/app-root.less
new file mode 100644
index 0000000..c96ceab
--- /dev/null
+++ b/app/elements/app-root/app-root.less
@@ -0,0 +1,5 @@
+app-root {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
\ No newline at end of file

diff --git a/app/elements/app-root/app-root.ts b/app/elements/app-root/app-root.ts
new file mode 100644
index 0000000..fca92ba
--- /dev/null
+++ b/app/elements/app-root/app-root.ts
@@ -0,0 +1,12 @@
+import { BaseElement } from "../_base";
+import './app-root.less';
+
+export class AppRoot extends BaseElement {
+    onInit(): void {
+        console.log("APP ROOT INIT");
+    }
+
+    onUpdate(): void {
+        console.log("APP ROOT UPDATE");
+    }
+}
\ No newline at end of file

diff --git a/static/logo.png b/static/logo.png
new file mode 100644
index 0000000..9220189
Binary files /dev/null and b/static/logo.png differ