Change name to todo-lit

.gitignore

@@ -3,7 +3,8 @@ node_modules/
 /test/
 custom-elements.json
 # top level source
-my-element.js
-my-element.js.map
-my-element.d.ts
-my-element.d.ts.map
+todo-lit.js
+todo-lit.js.map
+todo-lit.d.ts
+todo-lit.d.ts.map
+.vscode/

components/click-counter.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit-element';
+export declare class ClickCounter extends LitElement {
+    static styles: import("lit-element").CSSResultGroup;
+    count: number;
+    render(): import("lit-html").TemplateResult<1>;
+    private _onClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'click-counter': ClickCounter;
+    }
+}
+//# sourceMappingURL=click-counter.d.ts.map

components/click-counter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"click-counter.d.ts","sourceRoot":"","sources":["../src/components/click-counter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,aAAa,CAAC;AAGlD,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,uCAIX;IAGF,KAAK,SAAK;IAEV,MAAM;IAQN,OAAO,CAAC,QAAQ;CAGjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

components/click-counter.js

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit-element';
+import { customElement, property } from 'lit/decorators.js';
+let ClickCounter = class ClickCounter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.count = 0;
+    }
+    render() {
+        return html `
+      <button @click=${this._onClick}>
+        Click count: ${this.count}    
+      </button>
+    `;
+    }
+    _onClick() {
+        this.count++;
+    }
+};
+ClickCounter.styles = css `
+    :host {
+      display: block;
+    }
+  `;
+__decorate([
+    property({ type: Number })
+], ClickCounter.prototype, "count", void 0);
+ClickCounter = __decorate([
+    customElement('click-counter')
+], ClickCounter);
+export { ClickCounter };
+//# sourceMappingURL=click-counter.js.map

components/click-counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"click-counter.js","sourceRoot":"","sources":["../src/components/click-counter.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,aAAa,CAAC;AAClD,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAG1D,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;IAA5C;;QAQE,UAAK,GAAG,CAAC,CAAC;IAaZ,CAAC;IAXC,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,QAAQ;uBACb,IAAI,CAAC,KAAK;;KAE5B,CAAC;IACJ,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;CACF,CAAA;AApBQ,mBAAM,GAAG,GAAG,CAAA;;;;GAIlB,CAAC;AAGF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;2CACf;AARC,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAqBxB;SArBY,YAAY","sourcesContent":["import {LitElement, html, css} from 'lit-element';\nimport {customElement, property} from 'lit/decorators.js';\n\n@customElement('click-counter')\nexport class ClickCounter extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n    }\n  `;\n\n  @property({type: Number})\n  count = 0;\n\n  render() {\n    return html`\n      <button @click=${this._onClick}>\n        Click count: ${this.count}    \n      </button>\n    `;\n  }\n\n  private _onClick() {\n    this.count++;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'click-counter': ClickCounter;\n  }\n}\n"]}

components/todo-input.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit-element';
+export declare class TodoInputElement extends LitElement {
+    static styles: import("lit-element").CSSResultGroup;
+    _input: HTMLInputElement;
+    render(): import("lit-html").TemplateResult<1>;
+    private _onkeyup;
+    private _oninput;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'todo-input': TodoInputElement;
+    }
+}
+//# sourceMappingURL=todo-input.d.ts.map

components/todo-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"todo-input.d.ts","sourceRoot":"","sources":["../src/components/todo-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,aAAa,CAAC;AAUlD,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,uCAIX;IAGF,MAAM,EAAG,gBAAgB,CAAC;IAE1B,MAAM;IAQN,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,QAAQ;CAGjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

components/todo-input.js

@@ -0,0 +1,47 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit-element';
+import { customElement, query } from 'lit/decorators.js';
+// const ENTER_KEY = 13;
+// const ESC_KEY = 27
+const TodoInputEventType = {
+    SUBMIT_TODO: 'submit-todo'
+};
+let TodoInputElement = class TodoInputElement extends LitElement {
+    render() {
+        return html `
+      <input type="text"
+        @keyup="${this._onkeyup}"
+        @input="${this._oninput}">
+    `;
+    }
+    _onkeyup(event) {
+        if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+            this.dispatchEvent(new CustomEvent(TodoInputEventType.SUBMIT_TODO, {
+                bubbles: true,
+                composed: true,
+                detail: this._input.value
+            }));
+        }
+    }
+    _oninput(event) {
+        console.log('oninput:', event);
+    }
+};
+TodoInputElement.styles = css `
+    :host {
+      display: block;
+    }
+  `;
+__decorate([
+    query('input', true)
+], TodoInputElement.prototype, "_input", void 0);
+TodoInputElement = __decorate([
+    customElement('todo-input')
+], TodoInputElement);
+export { TodoInputElement };
+//# sourceMappingURL=todo-input.js.map

dev/index.html

@@ -3,20 +3,21 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>&lt;my-element> Demo</title>
+    <title>&lt;todo-lit> Demo</title>
     <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="../node_modules/lit/polyfill-support.js"></script>
-    <script type="module" src="../my-element.js"></script>
+    <script type="module" src="../todo-lit.js"></script>
     <style>
-      p {
-        border: solid 1px blue;
-        padding: 8px;
+      body {
+        margin: 0;
+        padding: 0;
+        display: block;
+        box-sizing: border-box;
       }
     </style>
   </head>
   <body>
-    <my-element>
-      <p>This is child content</p>
-    </my-element>
+    <todo-lit>
+    </todo-lit>
   </body>
 </html>

docs-src/_includes/header.11ty.cjs

@@ -1,7 +1,7 @@
 module.exports = function (data) {
   return `
 <header>
-  <h1>&lt;my-element></h1>
+  <h1>&lt;todo-lit></h1>
   <h2>A web component just for me.</h2>
 </header>`;
 };

docs-src/_includes/page.11ty.cjs

@@ -20,7 +20,7 @@ module.exports = function (data) {
     <script src="/node_modules/lit/polyfill-support.js"></script>
     <script type="module" src="${relative(
       page.url,
-      '/my-element.bundled.js'
+      '/todo-lit.bundled.js'
     )}"></script>
   </head>
   <body>

docs-src/api.11ty.cjs

@@ -6,7 +6,7 @@ module.exports = class Docs {
   data() {
     return {
       layout: 'page.11ty.cjs',
-      title: '<my-element> ⌲ Docs',
+      title: '<todo-lit> ⌲ Docs',
     };
   }
 

docs-src/examples/index.md

@@ -1,20 +1,20 @@
 ---
 layout: example.11ty.cjs
-title: <my-element> ⌲ Examples ⌲ Basic
+title: <todo-lit> ⌲ Examples ⌲ Basic
 tags: example
 name: Basic
 description: A basic example
 ---
 
 <style>
-  my-element p {
+  todo-lit p {
     border: solid 1px blue;
     padding: 8px;
   }
 </style>
-<my-element>
+<todo-lit>
   <p>This is child content</p>
-</my-element>
+</todo-lit>
 
 <h3>CSS</h3>
 
@@ -28,7 +28,7 @@ p {
 <h3>HTML</h3>
 
 ```html
-<my-element>
+<todo-lit>
   <p>This is child content</p>
-</my-element>
+</todo-lit>
 ```

docs-src/examples/name-property.md

@@ -1,15 +1,15 @@
 ---
 layout: example.11ty.cjs
-title: <my-element> ⌲ Examples ⌲ Name Property
+title: <todo-lit> ⌲ Examples ⌲ Name Property
 tags: example
 name: Name Property
 description: Setting the name property
 ---
 
-<my-element name="Earth"></my-element>
+<todo-lit name="Earth"></todo-lit>
 
 <h3>HTML</h3>
 
 ```html
-<my-element name="Earth"></my-element>
+<todo-lit name="Earth"></todo-lit>
 ```

docs-src/index.md

@@ -1,27 +1,27 @@
 ---
 layout: page.11ty.cjs
-title: <my-element> ⌲ Home
+title: <todo-lit> ⌲ Home
 ---
 
-# &lt;my-element>
+# &lt;todo-lit>
 
-`<my-element>` is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.
+`<todo-lit>` is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.
 
 ## As easy as HTML
 
 <section class="columns">
   <div>
 
-`<my-element>` is just an HTML element. You can it anywhere you can use HTML!
+`<todo-lit>` is just an HTML element. You can it anywhere you can use HTML!
 
 ```html
-<my-element></my-element>
+<todo-lit></todo-lit>
 ```
 
   </div>
   <div>
 
-<my-element></my-element>
+<todo-lit></todo-lit>
 
   </div>
 </section>
@@ -31,16 +31,16 @@ title: <my-element> ⌲ Home
 <section class="columns">
   <div>
 
-`<my-element>` can be configured with attributed in plain HTML.
+`<todo-lit>` can be configured with attributed in plain HTML.
 
 ```html
-<my-element name="HTML"></my-element>
+<todo-lit name="HTML"></todo-lit>
 ```
 
   </div>
   <div>
 
-<my-element name="HTML"></my-element>
+<todo-lit name="HTML"></todo-lit>
 
   </div>
 </section>
@@ -50,7 +50,7 @@ title: <my-element> ⌲ Home
 <section class="columns">
   <div>
 
-`<my-element>` can be used with declarative rendering libraries like Angular, React, Vue, and lit-html
+`<todo-lit>` can be used with declarative rendering libraries like Angular, React, Vue, and lit-html
 
 ```js
 import {html, render} from 'lit-html';
@@ -59,8 +59,8 @@ const name = 'lit-html';
 
 render(
   html`
-    <h2>This is a &lt;my-element&gt;</h2>
-    <my-element .name=${name}></my-element>
+    <h2>This is a &lt;todo-lit&gt;</h2>
+    <todo-lit .name=${name}></todo-lit>
   `,
   document.body
 );
@@ -69,8 +69,8 @@ render(
   </div>
   <div>
 
-<h2>This is a &lt;my-element&gt;</h2>
-<my-element name="lit-html"></my-element>
+<h2>This is a &lt;todo-lit&gt;</h2>
+<todo-lit name="lit-html"></todo-lit>
 
   </div>
 </section>

docs-src/install.md

@@ -1,16 +1,16 @@
 ---
 layout: page.11ty.cjs
-title: <my-element> ⌲ Install
+title: <todo-lit> ⌲ Install
 ---
 
 # Install
 
-`<my-element>` is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.
+`<todo-lit>` is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.
 
 ## Local Installation
 
 ```bash
-npm i my-element
+npm i todo-lit
 ```
 
 ## CDN
@@ -22,11 +22,11 @@ For this element to work from unpkg.com specifically, you need to include the `?
 ### HTML
 
 ```html
-<script type="module" src="https://unpkg.com/my-element?module"></script>
+<script type="module" src="https://unpkg.com/todo-lit?module"></script>
 ```
 
 ### JavaScript
 
 ```html
-import {MyElement} from 'https://unpkg.com/my-element?module';
+import {TodoLit} from 'https://unpkg.com/todo-lit?module';
 ```

docs/api/index.html

@@ -5,18 +5,18 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><my-element> ⌲ Docs</title>
+    <title><todo-lit> ⌲ Docs</title>
     <link rel="stylesheet" href="../docs.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
     <link href="../prism-okaidia.css" rel="stylesheet" />
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="/node_modules/lit/polyfill-support.js"></script>
-    <script type="module" src="../my-element.bundled.js"></script>
+    <script type="module" src="../todo-lit.bundled.js"></script>
   </head>
   <body>
     
 <header>
-  <h1>&lt;my-element></h1>
+  <h1>&lt;todo-lit></h1>
   <h2>A web component just for me.</h2>
 </header>
     
@@ -31,7 +31,7 @@
         
       <h1>API</h1>
       
-        <h2>&lt;my-element></h2>
+        <h2>&lt;todo-lit></h2>
         <div>
           An example element.
         </div>

docs/examples/index.html

@@ -5,18 +5,18 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><my-element> ⌲ Examples ⌲ Basic</title>
+    <title><todo-lit> ⌲ Examples ⌲ Basic</title>
     <link rel="stylesheet" href="../docs.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
     <link href="../prism-okaidia.css" rel="stylesheet" />
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="/node_modules/lit/polyfill-support.js"></script>
-    <script type="module" src="../my-element.bundled.js"></script>
+    <script type="module" src="../todo-lit.bundled.js"></script>
   </head>
   <body>
     
 <header>
-  <h1>&lt;my-element></h1>
+  <h1>&lt;todo-lit></h1>
   <h2>A web component just for me.</h2>
 </header>
     
@@ -46,18 +46,18 @@
       </nav>
       <div>
         <style>
-  my-element p {
+  todo-lit p {
     border: solid 1px blue;
     padding: 8px;
   }
 </style>
-<my-element>
-  <p>This is child content</p>
-</my-element>
+<todo-lit>
+  <p>This is child content...</p>
+</todo-lit>
 <h3>CSS</h3>
 <pre class="language-css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span><br>  <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span><br>  <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
 <h3>HTML</h3>
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>todo-lit</span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>todo-lit</span><span class="token punctuation">></span></span></code></pre>
 
       </div>
     </section>

docs/examples/name-property/index.html

@@ -5,18 +5,18 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><my-element> ⌲ Examples ⌲ Name Property</title>
+    <title><todo-lit> ⌲ Examples ⌲ Name Property</title>
     <link rel="stylesheet" href="../../docs.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
     <link href="../../prism-okaidia.css" rel="stylesheet" />
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="/node_modules/lit/polyfill-support.js"></script>
-    <script type="module" src="../../my-element.bundled.js"></script>
+    <script type="module" src="../../todo-lit.bundled.js"></script>
   </head>
   <body>
     
 <header>
-  <h1>&lt;my-element></h1>
+  <h1>&lt;todo-lit></h1>
   <h2>A web component just for me.</h2>
 </header>
     
@@ -45,9 +45,9 @@
         </ul>
       </nav>
       <div>
-        <p><my-element name="Earth"></my-element></p>
+        <p><todo-lit name="Earth"></todo-lit></p>
 <h3>HTML</h3>
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Earth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>todo-lit</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Earth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>todo-lit</span><span class="token punctuation">></span></span></code></pre>
 
       </div>
     </section>

docs/index.html

@@ -5,18 +5,18 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><my-element> ⌲ Home</title>
+    <title><todo-lit> ⌲ Home</title>
     <link rel="stylesheet" href="docs.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
     <link href="prism-okaidia.css" rel="stylesheet" />
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="/node_modules/lit/polyfill-support.js"></script>
-    <script type="module" src="my-element.bundled.js"></script>
+    <script type="module" src="todo-lit.bundled.js"></script>
   </head>
   <body>
     
 <header>
-  <h1>&lt;my-element></h1>
+  <h1>&lt;todo-lit></h1>
   <h2>A web component just for me.</h2>
 </header>
     
@@ -28,37 +28,37 @@
 </nav>
     <div id="main-wrapper">
       <main>
-        <h1>&lt;my-element&gt;</h1>
-<p><code>&lt;my-element&gt;</code> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.</p>
+        <h1>&lt;todo-lit&gt;</h1>
+<p><code>&lt;todo-lit&gt;</code> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.</p>
 <h2>As easy as HTML</h2>
 <section class="columns">
   <div>
-<p><code>&lt;my-element&gt;</code> is just an HTML element. You can it anywhere you can use HTML!</p>
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
+<p><code>&lt;todo-lit&gt;</code> is just an HTML element. You can it anywhere you can use HTML!</p>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>todo-lit</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>todo-lit</span><span class="token punctuation">></span></span></code></pre>
   </div>
   <div>
-<p><my-element></my-element></p>
+<p><todo-lit></todo-lit></p>
   </div>
 </section>
 <h2>Configure with attributes</h2>
 <section class="columns">
   <div>
-<p><code>&lt;my-element&gt;</code> can be configured with attributed in plain HTML.</p>
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
+<p><code>&lt;todo-lit&gt;</code> can be configured with attributed in plain HTML.</p>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>todo-lit</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>todo-lit</span><span class="token punctuation">></span></span></code></pre>
   </div>
   <div>
-<p><my-element name="HTML"></my-element></p>
+<p><todo-lit name="HTML"></todo-lit></p>
   </div>
 </section>
 <h2>Declarative rendering</h2>
 <section class="columns">
   <div>
-<p><code>&lt;my-element&gt;</code> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html</p>
-<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>html<span class="token punctuation">,</span> render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token function">render</span><span class="token punctuation">(</span><br>  html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br>    &lt;h2>This is a &amp;lt;my-element&amp;gt;&lt;/h2><br>    &lt;my-element .name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>&lt;/my-element><br>  </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span><br>  document<span class="token punctuation">.</span>body<br><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
+<p><code>&lt;todo-lit&gt;</code> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html</p>
+<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>html<span class="token punctuation">,</span> render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token function">render</span><span class="token punctuation">(</span><br>  html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br>    &lt;h2>This is a &amp;lt;todo-lit&amp;gt;&lt;/h2><br>    &lt;todo-lit .name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>&lt;/todo-lit><br>  </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span><br>  document<span class="token punctuation">.</span>body<br><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
   </div>
   <div>
-<h2>This is a &lt;my-element&gt;</h2>
-<my-element name="lit-html"></my-element>
+<h2>This is a &lt;todo-lit&gt;</h2>
+<todo-lit name="lit-html"></todo-lit>
   </div>
 </section>
 

docs/install/index.html

@@ -5,18 +5,18 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><my-element> ⌲ Install</title>
+    <title><todo-lit> ⌲ Install</title>
     <link rel="stylesheet" href="../docs.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
     <link href="../prism-okaidia.css" rel="stylesheet" />
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="/node_modules/lit/polyfill-support.js"></script>
-    <script type="module" src="../my-element.bundled.js"></script>
+    <script type="module" src="../todo-lit.bundled.js"></script>
   </head>
   <body>
     
 <header>
-  <h1>&lt;my-element></h1>
+  <h1>&lt;todo-lit></h1>
   <h2>A web component just for me.</h2>
 </header>
     
@@ -29,16 +29,16 @@
     <div id="main-wrapper">
       <main>
         <h1>Install</h1>
-<p><code>&lt;my-element&gt;</code> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.</p>
+<p><code>&lt;todo-lit&gt;</code> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.</p>
 <h2>Local Installation</h2>
-<pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> i my-element</code></pre>
+<pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> i todo-lit</code></pre>
 <h2>CDN</h2>
 <p>npm CDNs like <a href="">unpkg.com</a> can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.</p>
 <p>For this element to work from unpkg.com specifically, you need to include the <code>?module</code> query parameter, which tells unpkg.com to rewrite &quot;bare&quot; module specificers to full URLs.</p>
 <h3>HTML</h3>
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/my-element?module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/todo-lit?module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
 <h3>JavaScript</h3>
-<pre class="language-html"><code class="language-html">import {MyElement} from 'https://unpkg.com/my-element?module';</code></pre>
+<pre class="language-html"><code class="language-html">import {TodoLit} from 'https://unpkg.com/todo-lit?module';</code></pre>
 
       </main>
     </div>

docs/my-element.bundled.js

@@ -49,4 +49,4 @@ const it=(t,i)=>"method"===i.kind&&i.descriptor&&!("value"in i.descriptor)?{...i
       padding: 16px;
       max-width: 800px;
     }
-  `,et([st()],ot.prototype,"name",void 0),et([st({type:Number})],ot.prototype,"count",void 0),ot=et([(t=>i=>"function"==typeof i?((t,i)=>(window.customElements.define(t,i),i))(t,i):((t,i)=>{const{kind:s,elements:e}=i;return{kind:s,elements:e,finisher(i){window.customElements.define(t,i)}}})(t,i))("my-element")],ot);export{ot as MyElement};
+  `,et([st()],ot.prototype,"name",void 0),et([st({type:Number})],ot.prototype,"count",void 0),ot=et([(t=>i=>"function"==typeof i?((t,i)=>(window.customElements.define(t,i),i))(t,i):((t,i)=>{const{kind:s,elements:e}=i;return{kind:s,elements:e,finisher(i){window.customElements.define(t,i)}}})(t,i))("todo-lit")],ot);export{ot as TodoLit};

package.json

@@ -3,13 +3,13 @@
   "private": true,
   "version": "0.0.0",
   "description": "A simple web component",
-  "main": "my-element.js",
-  "module": "my-element.js",
+  "main": "todo-lit.js",
+  "module": "todo-lit.js",
   "type": "module",
   "scripts": {
     "build": "tsc",
     "build:watch": "tsc --watch",
-    "clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}",
+    "clean": "rimraf todo-lit.{d.ts,d.ts.map,js,js.map} test/todo-lit.{d.ts,d.ts.map,js,js.map} test/todo-lit_test.{d.ts,d.ts.map,js,js.map}",
     "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
     "lint:eslint": "eslint 'src/**/*.ts'",
     "lint:lit-analyzer": "lit-analyzer",
@@ -18,14 +18,14 @@
     "docs:clean": "rimraf docs",
     "docs:gen": "eleventy --config=.eleventy.cjs",
     "docs:gen:watch": "eleventy --config=.eleventy.cjs --watch",
-    "docs:build": "rollup -c --file docs/my-element.bundled.js",
+    "docs:build": "rollup -c --file docs/todo-lit.bundled.js",
     "docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
     "docs:serve": "wds --root-dir=docs --node-resolve --watch",
     "analyze": "wca analyze \"src/**/*.ts\" --outFile custom-elements.json",
     "serve": "wds --watch",
     "test": "wtr",
     "test:watch": "npm run test -- --watch",
-    "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
+    "checksize": "rollup -c ; cat todo-lit.bundled.js | gzip -9 | wc -c ; rm todo-lit.bundled.js"
   },
   "keywords": [
     "web-components",

rollup.config.js

@@ -10,9 +10,9 @@ import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 
 export default {
-  input: 'my-element.js',
+  input: 'todo-lit.js',
   output: {
-    file: 'my-element.bundled.js',
+    file: 'todo-lit.bundled.js',
     format: 'esm',
   },
   onwarn(warning) {

src/components/click-counter.ts

@@ -0,0 +1,32 @@
+import {LitElement, html, css} from 'lit-element';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('click-counter')
+export class ClickCounter extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  @property({type: Number})
+  count = 0;
+
+  render() {
+    return html`
+      <button @click=${this._onClick}>
+        Click count: ${this.count}    
+      </button>
+    `;
+  }
+
+  private _onClick() {
+    this.count++;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'click-counter': ClickCounter;
+  }
+}

src/components/todo-input.ts

@@ -0,0 +1,49 @@
+import {LitElement, html, css} from 'lit-element';
+import {customElement, query} from 'lit/decorators.js';
+
+// const ENTER_KEY = 13;
+// const ESC_KEY = 27
+
+const TodoInputEventType = {
+  SUBMIT_TODO: 'submit-todo'
+};
+
+@customElement('todo-input')
+export class TodoInputElement extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  @query('input', true)
+  _input!: HTMLInputElement;
+
+  render() {
+    return html`
+      <input type="text"
+        @keyup="${this._onkeyup}"
+        @input="${this._oninput}">
+    `;
+  }
+
+  private _onkeyup(event: KeyboardEvent) {
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      this.dispatchEvent(new CustomEvent(TodoInputEventType.SUBMIT_TODO, {
+        bubbles: true,
+        composed: true,
+        detail: this._input.value
+      }));
+    }
+  }
+
+  private _oninput(event: Event) {
+    console.log('oninput:', event);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'todo-input': TodoInputElement;
+  }
+}

src/my-element.ts

@@ -1,62 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import {LitElement, html, css} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-@customElement('my-element')
-export class MyElement extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      border: solid 1px gray;
-      padding: 16px;
-      max-width: 800px;
-    }
-  `;
-
-  /**
-   * The name to say "Hello" to.
-   */
-  @property()
-  name = 'World';
-
-  /**
-   * The number of times the button has been clicked.
-   */
-  @property({type: Number})
-  count = 0;
-
-  render() {
-    return html`
-      <h1>Hello, ${this.name}!</h1>
-      <button @click=${this._onClick} part="button">
-        Click Count: ${this.count}
-      </button>
-      <slot></slot>
-    `;
-  }
-
-  private _onClick() {
-    this.count++;
-  }
-
-  foo(): string {
-    return 'foo';
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'my-element': MyElement;
-  }
-}

src/test/my-element_test.ts → src/test/todo-lit.ts

@@ -4,20 +4,20 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {MyElement} from '../my-element.js';
+import {TodoLit} from '../todo-lit.js';
 
 import {fixture, html} from '@open-wc/testing';
 
 const assert = chai.assert;
 
-suite('my-element', () => {
+suite('todo-lit', () => {
   test('is defined', () => {
-    const el = document.createElement('my-element');
-    assert.instanceOf(el, MyElement);
+    const el = document.createElement('todo-lit');
+    assert.instanceOf(el, TodoLit);
   });
 
   test('renders with default values', async () => {
-    const el = await fixture(html`<my-element></my-element>`);
+    const el = await fixture(html`<todo-lit></todo-lit>`);
     assert.shadowDom.equal(
       el,
       `
@@ -29,7 +29,7 @@ suite('my-element', () => {
   });
 
   test('renders with a set name', async () => {
-    const el = await fixture(html`<my-element name="Test"></my-element>`);
+    const el = await fixture(html`<todo-lit name="Test"></todo-lit>`);
     assert.shadowDom.equal(
       el,
       `
@@ -41,7 +41,7 @@ suite('my-element', () => {
   });
 
   test('handles a click', async () => {
-    const el = (await fixture(html`<my-element></my-element>`)) as MyElement;
+    const el = (await fixture(html`<todo-lit></todo-lit>`)) as TodoLit;
     const button = el.shadowRoot!.querySelector('button')!;
     button.click();
     await el.updateComplete;
@@ -56,7 +56,7 @@ suite('my-element', () => {
   });
 
   test('styling applied', async () => {
-    const el = (await fixture(html`<my-element></my-element>`)) as MyElement;
+    const el = (await fixture(html`<todo-lit></todo-lit>`)) as TodoLit;
     await el.updateComplete;
     assert.equal(getComputedStyle(el).paddingTop, '16px');
   });

src/todo-lit.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {LitElement, html, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+import './components/click-counter.js';
+import './components/todo-input.js';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+@customElement('todo-lit')
+export class TodoLit extends LitElement {
+  constructor() {
+    super();
+    this.addEventListener('submit-todo', (event: Event) => {
+      console.log('submit-todo:', event);
+    });
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: 16px;
+    }
+  `;
+
+  render() {
+    return html`
+      <h1>Hello, ${this.foo()}!</h1>
+      <click-counter></click-counter>
+      <todo-input></todo-input>
+      <slot></slot>
+    `;
+  }
+
+  foo(): string {
+    return 'foo';
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'todo-lit': TodoLit;
+  }
+}

web-test-runner.config.js

@@ -36,7 +36,7 @@ import {playwrightLauncher} from '@web/test-runner-playwright';
 //   capabilities: {
 //     'browserstack.user': process.env.BROWSER_STACK_USERNAME,
 //     'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY,
-//     project: 'my-element',
+//     project: 'todo-lit',
 //     name: 'unit tests',
 //     build: `${process.env.GITHUB_REF ?? 'local'} build ${
 //       process.env.GITHUB_RUN_NUMBER ?? ''