add docs

.gitignore

@@ -14,4 +14,9 @@ lit-element.d.ts
 /demo/**/*.js
 /demo/**/*.js.map
 
-!custom_typings/
+!custom_typings/
+
+#Docs
+
+docs/node_modules
+.DS_Store

docs/_config.yml

@@ -0,0 +1,10 @@
+name: LitElement docs
+description: A lightweight library for creating custom elements
+exclude: [package.json, polymer.json, src, node_modules, package-lock.json]
+markdown: kramdown
+kramdown: 
+  parse_block_html: true
+projects: includes/projects
+collections:
+  includes:
+    output: true

docs/_data/site.yml

@@ -0,0 +1,109 @@
+title: LitElement Documentation
+toc:
+  try: 
+    title: Try LitElement
+    url: /try/
+    toc: 
+      create:
+        title: Create your first custom element
+        url: /try/create
+      use:
+        title: Use your element in a web page
+        url: /try/use
+      properties:
+        title: Declare and use properties
+        url: /try/properties
+      expressions: 
+        title: Add a loop and an “if” statement
+        url: /try/expressions
+      events:
+        title: Add an event handler
+        url: /try/events
+      style: 
+        title: Style your element template
+        url: /try/style
+  docs:
+    title: API Documentation
+    url: /docs/
+    toc: 
+      create:
+        title: Create an element
+        url: /docs/create
+        toc: 
+          index:
+            title: Overview
+            url: /docs/create/index
+          extend:
+            title: Extend the LitElement base class
+            url: /docs/create/extend
+          typescript:
+            title: Use TypeScript decorators to create a custom element
+            url: /docs/create/typescript
+          renderroot:
+            title: Customize an element's render root
+            url: /docs/create/renderroot
+          design:
+            title: Designing an element
+            url: /docs/create/design
+      import: 
+        title: Import an existing element    
+        url: /docs/import
+      templates: 
+        title: Write a template
+        url: /docs/templates/
+        toc: 
+          index: 
+            title: Write a template
+            url: /docs/templates/index
+          expressions:
+            title: Use plain JavaScript expressions in a template
+            url: /docs/templates/expressions
+          annotations:
+            title: Bind data to a child element in a template 
+            url: /docs/templates/annotations
+          compose:
+            title: Compose and nest lit-element templates 
+            url: /docs/templates/compose
+          slots:
+            title: Render light DOM children in a template 
+            url: /docs/templates/slots
+          design:
+            title: Designing efficient LitElement templates
+            url: /docs/templates/design
+      properties: 
+        title: Work with properties
+        url: /docs/properties
+      lifecycle: 
+        title: Work with the element lifecycle
+        url: /docs/lifecycle/
+        toc:
+          index:
+            title: The LitElement update lifecycle
+            url: /docs/lifecycle/index
+          tasks: 
+            title: Perform tasks during the element update lifecycle
+            url: /docs/lifecycle/tasks
+          examples:
+            title: Example use cases
+            url: /docs/lifecycle/examples
+          methods:
+            title: Update lifecycle methods and Promises
+            url: /docs/lifecycle/methods
+      events: 
+        title: Work with events
+        url: /docs/events
+      reuse: 
+        title: Create reusable features
+        url: /docs/reuse
+      style: 
+        title: Style elements with CSS
+        url: /docs/style
+      api:
+        title: API reference
+        url: /docs/api
+  tools:
+    title: Tools
+    url: /tools/
+  about:
+    title: About LitElement
+    url: /about

docs/_includes/analytics.html

@@ -0,0 +1,7 @@
+<script async src="https://www.googletagmanager.com/gtag/js?id={{site.google_analytics}}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '{{site.google_analytics}}');
+</script>

docs/_includes/article.html

@@ -0,0 +1,21 @@
+
+<div><a href="{{site.baseurl}}{{section.url}}">{{section.title}}</a></div>
+
+<h1><a href="{{site.baseurl}}{{topic.url}}">{{topic.title}}</a></h1>
+
+{%- if topic.toc -%}
+<ul>
+  {%- for item in topic.toc -%}
+    {%- if item[1].url == self.url -%}
+      <li class="current"><a href="{{site.baseurl}}{{item[1].url}}">{{item[1].title}}</a></li>  
+    {%- else -%}
+      <li><a href="{{site.baseurl}}{{item[1].url}}">{{item[1].title}}</a></li>  
+    {%- endif -%}
+  {%- endfor -%}
+</ul>
+<hr />
+<h2><a href="{{site.baseurl}}{{subtopic.url}}">{{subtopic.title}}</a></h2>
+
+{%- endif -%}
+
+{{ content }}

docs/_includes/prevnext.html

@@ -0,0 +1,13 @@
+{%- comment -%} Note: No HTML indentation to prevent markdown processing. {%- endcomment -%}
+<div class="prevnext">
+<div class="next">
+{% if include.nexturl %}
+<a href="{{include.nexturl}}">Next: {{include.nexttitle}} &gt;&gt;</a>
+{% endif %}
+</div>
+<div class="prev">
+{% if include.prevurl %}
+<a href="{{include.prevurl}}">&lt;&lt; Previous: {{include.prevtitle}}</a>
+{% endif %}
+</div>
+</div>

docs/_includes/project.html

@@ -0,0 +1,4 @@
+<stack-blitz
+    folder="{{ site.baseurl }}/{{ site.projects }}/{{ include.folder | default: template }}"
+    openFile="{{ include.openFile | default: custom-element.js }}">
+</stack-blitz>

docs/_includes/projects/docs/annotations/custom-element.js

@@ -0,0 +1,44 @@
+import { LitElement, html } from '@polymer/lit-element';
+
+class CustomElement extends LitElement {  
+  static get properties(){
+    return {
+      prop1: String,
+      prop2: String,
+      prop3: Boolean,
+      prop4: String
+    };
+  }
+  constructor(){
+    super();
+    this.prop1='text';
+    this.prop2='attr';
+    this.prop3=true;
+    this.prop4='fries';
+  }
+  render(){
+    return html`
+      <div>Bind to a child element's text node. ${this.prop1}</div>
+
+      <div id="${this.prop2}">Bind to a child element's attribute.</div>
+
+      <p>Bind to a child element's boolean attribute. 
+        <input type="checkbox" checked="${this.prop3}"/>
+      </p>
+
+      <p>Bind to a child element's property. 
+        <input type="checkbox" .value="${this.prop4}"/>
+      </p>
+
+      <p><button id="pie" @click="${(e) => this.handlePls(e)}">
+        Bind to a child element's event handler.
+      </button></p>
+    `;
+  }
+  handlePls(e){
+    var id = e.target.id; 
+    console.log(id + '.');
+  }
+}
+
+customElements.define('custom-element', CustomElement);

docs/_includes/projects/docs/annotations/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+  <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+
+  <title>lit-element code sample</title>
+
+  <script type="module" src="./custom-element.js"></script>
+</head>
+
+  <body>
+    <custom-element></custom-element>
+  </body>
+
+</html>

docs/_includes/projects/docs/annotations/index.ts

@@ -0,0 +1 @@
+import './custom-element.js';

docs/_includes/projects/docs/annotations/manifest.json

@@ -0,0 +1,14 @@
+{
+  "title": "lit-element code sample",
+  "description": "lit-element code sample",
+  "files": [
+    "custom-element.js",
+    "index.html",
+    "index.ts"
+  ],
+  "dependencies": {
+    "@polymer/lit-element": "latest",
+    "@webcomponents/webcomponentsjs": "latest"
+  },
+  "template": "typescript"
+}

docs/_includes/projects/docs/compose/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+  <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <title>lit-element code sample</title>
+
+</head>
+
+  <body>
+    <my-app></my-app>
+  </body>
+
+</html>

docs/_includes/projects/docs/compose/index.ts

@@ -0,0 +1 @@
+import './my-app.js';

docs/_includes/projects/docs/compose/manifest.json

@@ -0,0 +1,14 @@
+{
+  "title": "lit-element code sample",
+  "description": "lit-element code sample",
+  "files": [
+    "my-app.js",
+    "index.html",
+    "index.ts"
+  ],
+  "dependencies": {
+    "@polymer/lit-element": "latest",
+    "@webcomponents/webcomponentsjs": "latest"
+  },
+  "template": "typescript"
+}

docs/_includes/projects/docs/compose/my-app.js

@@ -0,0 +1,51 @@
+import { LitElement, html } from '@polymer/lit-element';
+
+class MyApp extends LitElement {  
+  static get properties(){
+    return {
+      headerText: { type: String },
+      menu: { type: Array },
+      footerText: { type: String }
+    };
+  }
+  constructor(){
+    super();
+    this.headerText="My App";
+    this.menu = [
+      { 'url': '/design', title: 'Design'}, 
+      { 'url': '/how', title: 'How-tos'}, 
+      { 'url': '/about', title: 'About'}
+    ];
+    this.footerText="Copyright (c) Me, 2018";
+    this.myBool = true;
+  }
+
+  static get headerTemplate(){
+    return html`
+      <header>${this.headerText}</header>
+    `;
+  }
+  static get navTemplate(){
+    return html`
+      <nav>
+        ${this.menu.map(i => { return html`
+          <li><a href="${i.url}">${i.title}</a></li>
+        `;})}
+      </nav>
+    `;
+  }
+  static get footerTemplate(){
+    return html`
+      <footer>${this.footerText}</footer>
+    `;
+  }
+
+  render(){
+    return html`
+      ${this.headerTemplate()}
+      ${this.navTemplate()}
+      ${this.footerTemplate()}
+    `;
+  }
+}
+customElements.define('my-app', MyApp);

docs/_includes/projects/docs/create/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+  <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+
+  <script type="module" src="./my-element.js"></script>
+  <title>lit-element code sample</title>
+</head>
+<body>
+  <my-element></my-element>
+</body>
+</html>

docs/_includes/projects/docs/create/index.ts

@@ -0,0 +1 @@
+import './my-element.js';

docs/_includes/projects/docs/create/manifest.json

@@ -0,0 +1,14 @@
+{
+  "files": [
+    "my-element.js",
+    "index.html",
+    "index.ts"
+  ],
+  "title": "lit-element code sample",
+  "description": "lit-element code sample",
+  "template": "typescript",
+  "dependencies": {
+    "@polymer/lit-element": "latest",
+    "@webcomponents/webcomponentsjs": "latest"
+  }
+}