Adding Lit to the thing.

pages/lit-test.html

@@ -0,0 +1,61 @@
+<script type="module">
+  import {LitElement, html, css} from '/js/lit-core.min.js';
+
+  class Validator extends LitElement {
+    static styles = css`
+      .error {
+        background-color: red;
+        color: white;
+        font-size: 4em;
+      }`;
+
+    static properties = {
+      failed: {type: Boolean}
+    };
+
+    constructor() {
+      super();
+      this.failed == false;
+    }
+
+    status() {
+      if(this.failed) {
+        return html`<span class="error">Validation Failed!</span>`
+      } else {
+        return "";
+      }
+    }
+
+    render() {
+      return html`
+        <div @submit=${this._submit}>
+        ${this.status()}
+        <slot></slot>
+        </div>`;
+    }
+
+    _submit(e) {
+      e.preventDefault();
+
+      for(let field of e.target.children) {
+        if(field.value == "Change Me") {
+          this.failed = true;
+          break;
+        } else {
+          this.failed = false;
+        }
+      }
+    }
+  }
+
+  customElements.define('form-validator', Validator);
+</script>
+
+<h1>Lit Test</h1>
+
+<form-validator>
+  <form>
+    <input value="Change Me" />
+    <input type="submit" value="Submit" />
+  </form>
+</form-validator>