initial commit

dominikfeininger · Nov 11, 2019 · a2cec0e · a2cec0e
1 parent c692a0d
commit a2cec0e
Show file tree

Hide file tree

Showing 7 changed files with 3,585 additions and 0 deletions.
diff --git a/HelloTemplate.js b/HelloTemplate.js
@@ -0,0 +1,10 @@
+import {html, render} from 'lit-html';
+
+// This is a lit-html template function. It returns a lit-html template.
+const helloTemplate = (name) => html`<div>Hello ${name}!</div>`;
+
+// This renders <div>Hello Steve!</div> to the document body
+render(helloTemplate('Steve'), document.body);
+
+// This updates to <div>Hello Kevin!</div>, but only updates the ${name} part
+render(helloTemplate('Kevin'), document.body);
diff --git a/HelloWorld.js b/HelloWorld.js
@@ -0,0 +1,19 @@
+class HelloWorld extends HTMLElement{
+
+    constructor(){
+        super();
+        // this.attachShadow({mode:'open'});
+        this.render();
+    }
+
+    render() {
+        const t = document.createElement('div');
+        t.innerHTML = 'hello world';
+
+        // this.shadowRoot.appenChild(t);
+        this.appendChild(t);
+    }
+};
+window.customElements.define("hello-wold", HelloWorld);
+
+export HelloWorld;
diff --git a/app.js b/app.js
@@ -0,0 +1,3 @@
+const app = {};
+
+export app;
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <title>SPA</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+
+<body>
+
+    <main id="app">
+        <hello-wold></hello-wold>
+        <hello-template></hello-template>
+    </main>
+
+    <script src="app.js" type="module"></script>
+    <script src="HelloWorld.js" type="module"></script>
+    <script src="HelloTemplate.js" type="module"></script>
+</body>
+
+</html>