added base element

app/app.html

@@ -1 +1,6 @@
-<div>App running</div>
+<app-root>
+    <div class="flex-horiz">
+        <div>col1</div>
+        <div>col2</div>
+    </div>
+</app-root>

app/app.less

@@ -1,3 +1,34 @@
-body {
+html, body, body > * {
-    background: aqua;
+    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;
 }

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);

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() { }
+}

app/elements/app-root/app-root.less

@@ -0,0 +1,5 @@
+app-root {
+    width: 100%;
+    height: 100%;
+    display: block;
+}

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");
+    }
+}