From e205f51b67bda647001248afa43545b28c8135a4 Mon Sep 17 00:00:00 2001 From: Kate Jeffreys Date: Tue, 16 Oct 2018 00:13:54 -0700 Subject: [PATCH 01/52] add docs --- .gitignore | 8 +- docs/_config.yml | 7 + docs/_data/toc.yml | 68 +++ docs/_data/topics.yml | 28 + docs/_includes/article.html | 61 ++ docs/_includes/project.html | 3 + docs/_includes/tocnav.html | 24 + docs/_introduction.md | 93 +++ docs/_layouts/default.html | 38 ++ docs/_layouts/post.html | 28 + .../@polymer/lit-element/lib/decorators.js | 81 +++ .../lit-element/lib/updating-element.js | 556 ++++++++++++++++++ .../@stackblitz/sdk/bundles/sdk.m.js | 189 ++++++ .../custom-elements-es5-adapter.js | 15 + .../webcomponentsjs/webcomponents-bundle.js | 274 +++++++++ .../lib/default-template-processor.js | 59 ++ .../node_modules/lit-html/lib/directive.js | 19 + .../gh-pages/node_modules/lit-html/lib/dom.js | 44 ++ .../lit-html/lib/modify-template.js | 154 +++++ .../node_modules/lit-html/lib/part.js | 5 + .../node_modules/lit-html/lib/parts.js | 453 ++++++++++++++ .../node_modules/lit-html/lib/render.js | 44 ++ .../node_modules/lit-html/lib/shady-render.js | 172 ++++++ .../lit-html/lib/template-factory.js | 40 ++ .../lit-html/lib/template-instance.js | 111 ++++ .../lit-html/lib/template-result.js | 93 +++ .../node_modules/lit-html/lib/template.js | 236 ++++++++ .../node_modules/lit-html/lit-html.js | 37 ++ docs/_site/build/gh-pages/src/index.html | 25 + docs/_site/build/gh-pages/src/index.js | 3 + .../build/gh-pages/src/project-displayer.bak | 132 +++++ .../build/gh-pages/src/project-displayer.js | 83 +++ .../build/gh-pages/src/project-loader.js | 79 +++ docs/_site/build/gh-pages/src/stack-blitz.js | 75 +++ docs/_site/build/polymer.json | 20 + docs/_site/css/main.css | 473 +++++++++++++++ docs/_site/css/pygments.css | 61 ++ docs/_site/docs/create/design.html | 201 +++++++ docs/_site/docs/create/index.html | 273 +++++++++ docs/_site/docs/create/renderroot.html | 286 +++++++++ docs/_site/docs/create/typescript.html | 202 +++++++ docs/_site/docs/import.html | 251 ++++++++ docs/_site/docs/index.html | 169 ++++++ docs/_site/docs/templates/annotations.html | 303 ++++++++++ docs/_site/docs/templates/compose.html | 312 ++++++++++ docs/_site/docs/templates/design.html | 364 ++++++++++++ docs/_site/docs/templates/expressions.html | 211 +++++++ docs/_site/docs/templates/index.html | 211 +++++++ docs/_site/docs/templates/slots.html | 326 ++++++++++ docs/_site/index.html | 177 ++++++ .../docs/annotations/custom-element.js | 44 ++ .../projects/docs/annotations/index.html | 19 + docs/_site/projects/docs/annotations/index.ts | 1 + .../projects/docs/annotations/manifest.json | 14 + docs/_site/projects/docs/compose/index.html | 17 + docs/_site/projects/docs/compose/index.ts | 1 + .../_site/projects/docs/compose/manifest.json | 14 + docs/_site/projects/docs/compose/my-app.js | 51 ++ docs/_site/projects/docs/create/index.html | 16 + docs/_site/projects/docs/create/index.ts | 1 + docs/_site/projects/docs/create/manifest.json | 14 + docs/_site/projects/docs/create/my-element.js | 27 + .../projects/docs/renderroot/default-root.js | 14 + .../_site/projects/docs/renderroot/index.html | 19 + docs/_site/projects/docs/renderroot/index.ts | 2 + .../projects/docs/renderroot/light-dom.js | 22 + .../projects/docs/renderroot/manifest.json | 15 + .../projects/docs/templates/dom-manip.js | 27 + docs/_site/projects/docs/templates/index.html | 19 + docs/_site/projects/docs/templates/index.ts | 2 + .../projects/docs/templates/manifest.json | 15 + .../docs/templates/update-properties.js | 34 ++ .../_site/projects/docs/templates1/index.html | 17 + docs/_site/projects/docs/templates1/index.ts | 1 + .../projects/docs/templates1/manifest.json | 14 + .../projects/docs/templates1/my-element.js | 31 + .../projects/docs/tryexpressions/README.md | 16 + .../docs/tryexpressions/custom-element.js | 27 + .../projects/docs/tryexpressions/index.html | 17 + .../projects/docs/tryexpressions/index.ts | 1 + .../docs/tryexpressions/manifest.json | 15 + docs/_site/projects/old/clone/README.md | 93 +++ .../projects/old/clone/custom-element.js | 36 ++ docs/_site/projects/old/clone/index.html | 19 + docs/_site/projects/old/clone/index.js | 1 + docs/_site/projects/old/clone/manifest.json | 14 + docs/_site/projects/old/declare/README.md | 36 ++ .../projects/old/declare/custom-element.js | 20 + docs/_site/projects/old/declare/index.html | 21 + docs/_site/projects/old/declare/index.js | 1 + docs/_site/projects/old/declare/manifest.json | 14 + docs/_site/projects/old/dispatch/README.md | 39 ++ .../projects/old/dispatch/custom-element.js | 25 + docs/_site/projects/old/dispatch/index.html | 20 + docs/_site/projects/old/dispatch/index.js | 1 + .../_site/projects/old/dispatch/manifest.json | 14 + docs/_site/projects/old/initialize/README.md | 128 ++++ .../projects/old/initialize/custom-element.js | 20 + docs/_site/projects/old/initialize/index.html | 21 + docs/_site/projects/old/initialize/index.js | 1 + .../projects/old/initialize/manifest.json | 14 + docs/_site/projects/old/listeners/README.md | 39 ++ .../projects/old/listeners/custom-element.js | 25 + docs/_site/projects/old/listeners/index.html | 20 + docs/_site/projects/old/listeners/index.js | 1 + .../projects/old/listeners/manifest.json | 14 + docs/_site/projects/old/objects/README.md | 92 +++ docs/_site/projects/old/objects/index.html | 19 + docs/_site/projects/old/objects/index.js | 1 + docs/_site/projects/old/objects/main-app.js | 19 + docs/_site/projects/old/objects/manifest.json | 15 + .../_site/projects/old/objects/student-rec.js | 23 + docs/_site/projects/old/share/README.md | 13 + docs/_site/projects/old/share/child-1.js | 29 + docs/_site/projects/old/share/child-2.js | 29 + docs/_site/projects/old/share/index.html | 18 + docs/_site/projects/old/share/index.js | 1 + docs/_site/projects/old/share/manifest.json | 16 + .../projects/old/share/parent-element.js | 41 ++ docs/_site/projects/try/create/README.md | 3 + .../projects/try/create/custom-element.js | 14 + docs/_site/projects/try/create/index.html | 14 + docs/_site/projects/try/create/index.ts | 1 + docs/_site/projects/try/create/manifest.json | 14 + docs/_site/projects/try/events/README.md | 14 + .../projects/try/events/custom-element.js | 15 + docs/_site/projects/try/events/index.html | 14 + docs/_site/projects/try/events/index.ts | 1 + docs/_site/projects/try/events/manifest.json | 15 + docs/_site/projects/try/expressions/README.md | 16 + .../try/expressions/custom-element.js | 27 + .../_site/projects/try/expressions/index.html | 17 + docs/_site/projects/try/expressions/index.ts | 1 + .../projects/try/expressions/manifest.json | 15 + docs/_site/projects/try/properties/README.md | 3 + .../projects/try/properties/custom-element.js | 25 + docs/_site/projects/try/properties/index.html | 16 + docs/_site/projects/try/properties/index.ts | 1 + .../projects/try/properties/manifest.json | 15 + docs/_site/projects/try/style/README.md | 3 + .../projects/try/style/custom-element.js | 13 + docs/_site/projects/try/style/index.html | 14 + docs/_site/projects/try/style/index.ts | 1 + docs/_site/projects/try/style/manifest.json | 15 + docs/_site/styleguide.html | 176 ++++++ docs/_site/tools/index.html | 203 +++++++ docs/_site/tools/setup.html | 242 ++++++++ docs/_site/try/create.html | 214 +++++++ docs/_site/try/events.html | 213 +++++++ docs/_site/try/expressions.html | 182 ++++++ docs/_site/try/index.html | 170 ++++++ docs/_site/try/properties.html | 202 +++++++ docs/_site/try/style.html | 195 ++++++ docs/_site/try/use.md | 0 docs/css/main.css | 473 +++++++++++++++ docs/css/pygments.css | 61 ++ docs/docs/create/design.md | 10 + docs/docs/create/index.md | 37 ++ docs/docs/create/renderroot.md | 60 ++ docs/docs/create/typescript.md | 11 + docs/docs/import.md | 89 +++ docs/docs/index.md | 7 + docs/docs/templates/annotations.md | 54 ++ docs/docs/templates/compose.md | 61 ++ docs/docs/templates/design.md | 67 +++ docs/docs/templates/expressions.md | 9 + docs/docs/templates/index.md | 9 + docs/docs/templates/slots.md | 125 ++++ docs/index.md | 55 ++ docs/package-lock.json | 31 + docs/package.json | 26 + docs/polymer.json | 9 + docs/projects/.DS_Store | Bin 0 -> 6148 bytes .../docs/annotations/custom-element.js | 44 ++ docs/projects/docs/annotations/index.html | 19 + docs/projects/docs/annotations/index.ts | 1 + docs/projects/docs/annotations/manifest.json | 14 + docs/projects/docs/compose/index.html | 17 + docs/projects/docs/compose/index.ts | 1 + docs/projects/docs/compose/manifest.json | 14 + docs/projects/docs/compose/my-app.js | 51 ++ docs/projects/docs/create/index.html | 16 + docs/projects/docs/create/index.ts | 1 + docs/projects/docs/create/manifest.json | 14 + docs/projects/docs/create/my-element.js | 27 + docs/projects/docs/renderroot/default-root.js | 14 + docs/projects/docs/renderroot/index.html | 19 + docs/projects/docs/renderroot/index.ts | 2 + docs/projects/docs/renderroot/light-dom.js | 22 + docs/projects/docs/renderroot/manifest.json | 15 + docs/projects/docs/templates/dom-manip.js | 27 + docs/projects/docs/templates/index.html | 19 + docs/projects/docs/templates/index.ts | 2 + docs/projects/docs/templates/manifest.json | 15 + .../docs/templates/update-properties.js | 34 ++ docs/projects/docs/templates1/index.html | 17 + docs/projects/docs/templates1/index.ts | 1 + docs/projects/docs/templates1/manifest.json | 14 + docs/projects/docs/templates1/my-element.js | 31 + docs/projects/docs/tryexpressions/README.md | 16 + .../docs/tryexpressions/custom-element.js | 27 + docs/projects/docs/tryexpressions/index.html | 17 + docs/projects/docs/tryexpressions/index.ts | 1 + .../docs/tryexpressions/manifest.json | 15 + docs/projects/old/clone/README.md | 93 +++ docs/projects/old/clone/custom-element.js | 36 ++ docs/projects/old/clone/index.html | 19 + docs/projects/old/clone/index.js | 1 + docs/projects/old/clone/manifest.json | 14 + docs/projects/old/declare/README.md | 36 ++ docs/projects/old/declare/custom-element.js | 20 + docs/projects/old/declare/index.html | 21 + docs/projects/old/declare/index.js | 1 + docs/projects/old/declare/manifest.json | 14 + docs/projects/old/dispatch/README.md | 39 ++ docs/projects/old/dispatch/custom-element.js | 25 + docs/projects/old/dispatch/index.html | 20 + docs/projects/old/dispatch/index.js | 1 + docs/projects/old/dispatch/manifest.json | 14 + docs/projects/old/initialize/README.md | 128 ++++ .../projects/old/initialize/custom-element.js | 20 + docs/projects/old/initialize/index.html | 21 + docs/projects/old/initialize/index.js | 1 + docs/projects/old/initialize/manifest.json | 14 + docs/projects/old/listeners/README.md | 39 ++ docs/projects/old/listeners/custom-element.js | 25 + docs/projects/old/listeners/index.html | 20 + docs/projects/old/listeners/index.js | 1 + docs/projects/old/listeners/manifest.json | 14 + docs/projects/old/objects/README.md | 92 +++ docs/projects/old/objects/index.html | 19 + docs/projects/old/objects/index.js | 1 + docs/projects/old/objects/main-app.js | 19 + docs/projects/old/objects/manifest.json | 15 + docs/projects/old/objects/student-rec.js | 23 + docs/projects/old/share/README.md | 13 + docs/projects/old/share/child-1.js | 29 + docs/projects/old/share/child-2.js | 29 + docs/projects/old/share/index.html | 18 + docs/projects/old/share/index.js | 1 + docs/projects/old/share/manifest.json | 16 + docs/projects/old/share/parent-element.js | 41 ++ docs/projects/try/create/README.md | 3 + docs/projects/try/create/custom-element.js | 14 + docs/projects/try/create/index.html | 14 + docs/projects/try/create/index.ts | 1 + docs/projects/try/create/manifest.json | 14 + docs/projects/try/events/README.md | 14 + docs/projects/try/events/custom-element.js | 15 + docs/projects/try/events/index.html | 14 + docs/projects/try/events/index.ts | 1 + docs/projects/try/events/manifest.json | 15 + docs/projects/try/expressions/README.md | 16 + .../try/expressions/custom-element.js | 27 + docs/projects/try/expressions/index.html | 17 + docs/projects/try/expressions/index.ts | 1 + docs/projects/try/expressions/manifest.json | 15 + docs/projects/try/properties/README.md | 3 + .../projects/try/properties/custom-element.js | 25 + docs/projects/try/properties/index.html | 16 + docs/projects/try/properties/index.ts | 1 + docs/projects/try/properties/manifest.json | 15 + docs/projects/try/style/README.md | 3 + docs/projects/try/style/custom-element.js | 13 + docs/projects/try/style/index.html | 14 + docs/projects/try/style/index.ts | 1 + docs/projects/try/style/manifest.json | 15 + docs/src/index.html | 32 + docs/src/index.js | 3 + docs/src/project-displayer.bak | 132 +++++ docs/src/project-displayer.js | 63 ++ docs/src/project-loader.js | 59 ++ docs/src/stack-blitz.js | 56 ++ docs/styleguide.md | 54 ++ docs/tools/index.md | 61 ++ docs/tools/setup.md | 91 +++ docs/try/create.md | 30 + docs/try/events.md | 60 ++ docs/try/expressions.md | 27 + docs/try/index.md | 18 + docs/try/properties.md | 45 ++ docs/try/style.md | 41 ++ docs/try/use.md | 0 283 files changed, 14473 insertions(+), 1 deletion(-) create mode 100644 docs/_config.yml create mode 100644 docs/_data/toc.yml create mode 100644 docs/_data/topics.yml create mode 100644 docs/_includes/article.html create mode 100644 docs/_includes/project.html create mode 100644 docs/_includes/tocnav.html create mode 100644 docs/_introduction.md create mode 100644 docs/_layouts/default.html create mode 100644 docs/_layouts/post.html create mode 100644 docs/_site/build/gh-pages/node_modules/@polymer/lit-element/lib/decorators.js create mode 100644 docs/_site/build/gh-pages/node_modules/@polymer/lit-element/lib/updating-element.js create mode 100644 docs/_site/build/gh-pages/node_modules/@stackblitz/sdk/bundles/sdk.m.js create mode 100644 docs/_site/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js create mode 100644 docs/_site/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/default-template-processor.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/directive.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/dom.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/modify-template.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/part.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/parts.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/render.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/shady-render.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/template-factory.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/template-instance.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/template-result.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lib/template.js create mode 100644 docs/_site/build/gh-pages/node_modules/lit-html/lit-html.js create mode 100644 docs/_site/build/gh-pages/src/index.html create mode 100644 docs/_site/build/gh-pages/src/index.js create mode 100644 docs/_site/build/gh-pages/src/project-displayer.bak create mode 100644 docs/_site/build/gh-pages/src/project-displayer.js create mode 100644 docs/_site/build/gh-pages/src/project-loader.js create mode 100644 docs/_site/build/gh-pages/src/stack-blitz.js create mode 100644 docs/_site/build/polymer.json create mode 100644 docs/_site/css/main.css create mode 100644 docs/_site/css/pygments.css create mode 100644 docs/_site/docs/create/design.html create mode 100644 docs/_site/docs/create/index.html create mode 100644 docs/_site/docs/create/renderroot.html create mode 100644 docs/_site/docs/create/typescript.html create mode 100644 docs/_site/docs/import.html create mode 100644 docs/_site/docs/index.html create mode 100644 docs/_site/docs/templates/annotations.html create mode 100644 docs/_site/docs/templates/compose.html create mode 100644 docs/_site/docs/templates/design.html create mode 100644 docs/_site/docs/templates/expressions.html create mode 100644 docs/_site/docs/templates/index.html create mode 100644 docs/_site/docs/templates/slots.html create mode 100644 docs/_site/index.html create mode 100644 docs/_site/projects/docs/annotations/custom-element.js create mode 100644 docs/_site/projects/docs/annotations/index.html create mode 100644 docs/_site/projects/docs/annotations/index.ts create mode 100644 docs/_site/projects/docs/annotations/manifest.json create mode 100644 docs/_site/projects/docs/compose/index.html create mode 100644 docs/_site/projects/docs/compose/index.ts create mode 100644 docs/_site/projects/docs/compose/manifest.json create mode 100644 docs/_site/projects/docs/compose/my-app.js create mode 100644 docs/_site/projects/docs/create/index.html create mode 100644 docs/_site/projects/docs/create/index.ts create mode 100644 docs/_site/projects/docs/create/manifest.json create mode 100644 docs/_site/projects/docs/create/my-element.js create mode 100644 docs/_site/projects/docs/renderroot/default-root.js create mode 100644 docs/_site/projects/docs/renderroot/index.html create mode 100644 docs/_site/projects/docs/renderroot/index.ts create mode 100644 docs/_site/projects/docs/renderroot/light-dom.js create mode 100644 docs/_site/projects/docs/renderroot/manifest.json create mode 100644 docs/_site/projects/docs/templates/dom-manip.js create mode 100644 docs/_site/projects/docs/templates/index.html create mode 100644 docs/_site/projects/docs/templates/index.ts create mode 100644 docs/_site/projects/docs/templates/manifest.json create mode 100644 docs/_site/projects/docs/templates/update-properties.js create mode 100644 docs/_site/projects/docs/templates1/index.html create mode 100644 docs/_site/projects/docs/templates1/index.ts create mode 100644 docs/_site/projects/docs/templates1/manifest.json create mode 100644 docs/_site/projects/docs/templates1/my-element.js create mode 100644 docs/_site/projects/docs/tryexpressions/README.md create mode 100644 docs/_site/projects/docs/tryexpressions/custom-element.js create mode 100644 docs/_site/projects/docs/tryexpressions/index.html create mode 100644 docs/_site/projects/docs/tryexpressions/index.ts create mode 100644 docs/_site/projects/docs/tryexpressions/manifest.json create mode 100644 docs/_site/projects/old/clone/README.md create mode 100644 docs/_site/projects/old/clone/custom-element.js create mode 100644 docs/_site/projects/old/clone/index.html create mode 100644 docs/_site/projects/old/clone/index.js create mode 100644 docs/_site/projects/old/clone/manifest.json create mode 100644 docs/_site/projects/old/declare/README.md create mode 100644 docs/_site/projects/old/declare/custom-element.js create mode 100644 docs/_site/projects/old/declare/index.html create mode 100644 docs/_site/projects/old/declare/index.js create mode 100644 docs/_site/projects/old/declare/manifest.json create mode 100644 docs/_site/projects/old/dispatch/README.md create mode 100644 docs/_site/projects/old/dispatch/custom-element.js create mode 100644 docs/_site/projects/old/dispatch/index.html create mode 100644 docs/_site/projects/old/dispatch/index.js create mode 100644 docs/_site/projects/old/dispatch/manifest.json create mode 100644 docs/_site/projects/old/initialize/README.md create mode 100644 docs/_site/projects/old/initialize/custom-element.js create mode 100644 docs/_site/projects/old/initialize/index.html create mode 100644 docs/_site/projects/old/initialize/index.js create mode 100644 docs/_site/projects/old/initialize/manifest.json create mode 100644 docs/_site/projects/old/listeners/README.md create mode 100644 docs/_site/projects/old/listeners/custom-element.js create mode 100644 docs/_site/projects/old/listeners/index.html create mode 100644 docs/_site/projects/old/listeners/index.js create mode 100644 docs/_site/projects/old/listeners/manifest.json create mode 100644 docs/_site/projects/old/objects/README.md create mode 100644 docs/_site/projects/old/objects/index.html create mode 100644 docs/_site/projects/old/objects/index.js create mode 100644 docs/_site/projects/old/objects/main-app.js create mode 100644 docs/_site/projects/old/objects/manifest.json create mode 100644 docs/_site/projects/old/objects/student-rec.js create mode 100644 docs/_site/projects/old/share/README.md create mode 100644 docs/_site/projects/old/share/child-1.js create mode 100644 docs/_site/projects/old/share/child-2.js create mode 100644 docs/_site/projects/old/share/index.html create mode 100644 docs/_site/projects/old/share/index.js create mode 100644 docs/_site/projects/old/share/manifest.json create mode 100644 docs/_site/projects/old/share/parent-element.js create mode 100644 docs/_site/projects/try/create/README.md create mode 100644 docs/_site/projects/try/create/custom-element.js create mode 100644 docs/_site/projects/try/create/index.html create mode 100644 docs/_site/projects/try/create/index.ts create mode 100644 docs/_site/projects/try/create/manifest.json create mode 100644 docs/_site/projects/try/events/README.md create mode 100644 docs/_site/projects/try/events/custom-element.js create mode 100644 docs/_site/projects/try/events/index.html create mode 100644 docs/_site/projects/try/events/index.ts create mode 100644 docs/_site/projects/try/events/manifest.json create mode 100644 docs/_site/projects/try/expressions/README.md create mode 100644 docs/_site/projects/try/expressions/custom-element.js create mode 100644 docs/_site/projects/try/expressions/index.html create mode 100644 docs/_site/projects/try/expressions/index.ts create mode 100644 docs/_site/projects/try/expressions/manifest.json create mode 100644 docs/_site/projects/try/properties/README.md create mode 100644 docs/_site/projects/try/properties/custom-element.js create mode 100644 docs/_site/projects/try/properties/index.html create mode 100644 docs/_site/projects/try/properties/index.ts create mode 100644 docs/_site/projects/try/properties/manifest.json create mode 100644 docs/_site/projects/try/style/README.md create mode 100644 docs/_site/projects/try/style/custom-element.js create mode 100644 docs/_site/projects/try/style/index.html create mode 100644 docs/_site/projects/try/style/index.ts create mode 100644 docs/_site/projects/try/style/manifest.json create mode 100644 docs/_site/styleguide.html create mode 100644 docs/_site/tools/index.html create mode 100644 docs/_site/tools/setup.html create mode 100644 docs/_site/try/create.html create mode 100644 docs/_site/try/events.html create mode 100644 docs/_site/try/expressions.html create mode 100644 docs/_site/try/index.html create mode 100644 docs/_site/try/properties.html create mode 100644 docs/_site/try/style.html create mode 100644 docs/_site/try/use.md create mode 100644 docs/css/main.css create mode 100644 docs/css/pygments.css create mode 100644 docs/docs/create/design.md create mode 100644 docs/docs/create/index.md create mode 100644 docs/docs/create/renderroot.md create mode 100644 docs/docs/create/typescript.md create mode 100644 docs/docs/import.md create mode 100644 docs/docs/index.md create mode 100644 docs/docs/templates/annotations.md create mode 100644 docs/docs/templates/compose.md create mode 100644 docs/docs/templates/design.md create mode 100644 docs/docs/templates/expressions.md create mode 100644 docs/docs/templates/index.md create mode 100644 docs/docs/templates/slots.md create mode 100644 docs/index.md create mode 100644 docs/package-lock.json create mode 100644 docs/package.json create mode 100644 docs/polymer.json create mode 100644 docs/projects/.DS_Store create mode 100644 docs/projects/docs/annotations/custom-element.js create mode 100644 docs/projects/docs/annotations/index.html create mode 100644 docs/projects/docs/annotations/index.ts create mode 100644 docs/projects/docs/annotations/manifest.json create mode 100644 docs/projects/docs/compose/index.html create mode 100644 docs/projects/docs/compose/index.ts create mode 100644 docs/projects/docs/compose/manifest.json create mode 100644 docs/projects/docs/compose/my-app.js create mode 100644 docs/projects/docs/create/index.html create mode 100644 docs/projects/docs/create/index.ts create mode 100644 docs/projects/docs/create/manifest.json create mode 100644 docs/projects/docs/create/my-element.js create mode 100644 docs/projects/docs/renderroot/default-root.js create mode 100644 docs/projects/docs/renderroot/index.html create mode 100644 docs/projects/docs/renderroot/index.ts create mode 100644 docs/projects/docs/renderroot/light-dom.js create mode 100644 docs/projects/docs/renderroot/manifest.json create mode 100644 docs/projects/docs/templates/dom-manip.js create mode 100644 docs/projects/docs/templates/index.html create mode 100644 docs/projects/docs/templates/index.ts create mode 100644 docs/projects/docs/templates/manifest.json create mode 100644 docs/projects/docs/templates/update-properties.js create mode 100644 docs/projects/docs/templates1/index.html create mode 100644 docs/projects/docs/templates1/index.ts create mode 100644 docs/projects/docs/templates1/manifest.json create mode 100644 docs/projects/docs/templates1/my-element.js create mode 100644 docs/projects/docs/tryexpressions/README.md create mode 100644 docs/projects/docs/tryexpressions/custom-element.js create mode 100644 docs/projects/docs/tryexpressions/index.html create mode 100644 docs/projects/docs/tryexpressions/index.ts create mode 100644 docs/projects/docs/tryexpressions/manifest.json create mode 100644 docs/projects/old/clone/README.md create mode 100644 docs/projects/old/clone/custom-element.js create mode 100644 docs/projects/old/clone/index.html create mode 100644 docs/projects/old/clone/index.js create mode 100644 docs/projects/old/clone/manifest.json create mode 100644 docs/projects/old/declare/README.md create mode 100644 docs/projects/old/declare/custom-element.js create mode 100644 docs/projects/old/declare/index.html create mode 100644 docs/projects/old/declare/index.js create mode 100644 docs/projects/old/declare/manifest.json create mode 100644 docs/projects/old/dispatch/README.md create mode 100644 docs/projects/old/dispatch/custom-element.js create mode 100644 docs/projects/old/dispatch/index.html create mode 100644 docs/projects/old/dispatch/index.js create mode 100644 docs/projects/old/dispatch/manifest.json create mode 100644 docs/projects/old/initialize/README.md create mode 100644 docs/projects/old/initialize/custom-element.js create mode 100644 docs/projects/old/initialize/index.html create mode 100644 docs/projects/old/initialize/index.js create mode 100644 docs/projects/old/initialize/manifest.json create mode 100644 docs/projects/old/listeners/README.md create mode 100644 docs/projects/old/listeners/custom-element.js create mode 100644 docs/projects/old/listeners/index.html create mode 100644 docs/projects/old/listeners/index.js create mode 100644 docs/projects/old/listeners/manifest.json create mode 100644 docs/projects/old/objects/README.md create mode 100644 docs/projects/old/objects/index.html create mode 100644 docs/projects/old/objects/index.js create mode 100644 docs/projects/old/objects/main-app.js create mode 100644 docs/projects/old/objects/manifest.json create mode 100644 docs/projects/old/objects/student-rec.js create mode 100644 docs/projects/old/share/README.md create mode 100644 docs/projects/old/share/child-1.js create mode 100644 docs/projects/old/share/child-2.js create mode 100644 docs/projects/old/share/index.html create mode 100644 docs/projects/old/share/index.js create mode 100644 docs/projects/old/share/manifest.json create mode 100644 docs/projects/old/share/parent-element.js create mode 100644 docs/projects/try/create/README.md create mode 100644 docs/projects/try/create/custom-element.js create mode 100644 docs/projects/try/create/index.html create mode 100644 docs/projects/try/create/index.ts create mode 100644 docs/projects/try/create/manifest.json create mode 100644 docs/projects/try/events/README.md create mode 100644 docs/projects/try/events/custom-element.js create mode 100644 docs/projects/try/events/index.html create mode 100644 docs/projects/try/events/index.ts create mode 100644 docs/projects/try/events/manifest.json create mode 100644 docs/projects/try/expressions/README.md create mode 100644 docs/projects/try/expressions/custom-element.js create mode 100644 docs/projects/try/expressions/index.html create mode 100644 docs/projects/try/expressions/index.ts create mode 100644 docs/projects/try/expressions/manifest.json create mode 100644 docs/projects/try/properties/README.md create mode 100644 docs/projects/try/properties/custom-element.js create mode 100644 docs/projects/try/properties/index.html create mode 100644 docs/projects/try/properties/index.ts create mode 100644 docs/projects/try/properties/manifest.json create mode 100644 docs/projects/try/style/README.md create mode 100644 docs/projects/try/style/custom-element.js create mode 100644 docs/projects/try/style/index.html create mode 100644 docs/projects/try/style/index.ts create mode 100644 docs/projects/try/style/manifest.json create mode 100644 docs/src/index.html create mode 100644 docs/src/index.js create mode 100644 docs/src/project-displayer.bak create mode 100644 docs/src/project-displayer.js create mode 100644 docs/src/project-loader.js create mode 100644 docs/src/stack-blitz.js create mode 100644 docs/styleguide.md create mode 100644 docs/tools/index.md create mode 100644 docs/tools/setup.md create mode 100644 docs/try/create.md create mode 100644 docs/try/events.md create mode 100644 docs/try/expressions.md create mode 100644 docs/try/index.md create mode 100644 docs/try/properties.md create mode 100644 docs/try/style.md create mode 100644 docs/try/use.md diff --git a/.gitignore b/.gitignore index ba9db6f9..32f0856e 100644 --- a/.gitignore +++ b/.gitignore @@ -14,4 +14,10 @@ lit-element.d.ts /demo/**/*.js /demo/**/*.js.map -!custom_typings/ \ No newline at end of file +!custom_typings/ + +#Docs + +docs/node_modules +docs/build +docs/_includes/projects diff --git a/docs/_config.yml b/docs/_config.yml new file mode 100644 index 00000000..51142ff9 --- /dev/null +++ b/docs/_config.yml @@ -0,0 +1,7 @@ +name: lit-element docs +description: lit-element docs +exclude: [package.json, polymer.json, src, node_modules, package-lock.json] +markdown: kramdown +kramdown: + parse_block_html: true +projects: projects diff --git a/docs/_data/toc.yml b/docs/_data/toc.yml new file mode 100644 index 00000000..1ed77d61 --- /dev/null +++ b/docs/_data/toc.yml @@ -0,0 +1,68 @@ +toc: + - title: Try lit-element + url: /try/ + toc: + - title: Create your first custom element + url: /try/create + - title: Use your element in a web page + url: /try/use + - title: Add a property value to your element template + url: /try/properties + - title: Add a loop and an “if” statement to your template + url: /try/expressions + - title: Add an event handler to your template + url: /try/events + - title: Style your element template + url: /try/style + - title: API Documentation + url: /docs/ + toc: + - title: Create an element + url: /docs/create + - title: Import an existing element + url: /docs/import + - title: Write a template + url: /docs/templates + - title: Work with properties + url: /docs/properties + - title: Work with the element lifecycle + url: /docs/lifecycle + - title: Work with events + url: /docs/events + - title: Create reusable features and classes + url: /docs/reuse + - title: Style elements with CSS + url: /docs/style + - title: API reference + url: /docs/api + - title: Develop and deploy + url: /tools/ + toc: + - title: Set up lit-element locally + url: /tools/setup + - title: Build a lit-element project for deployment + url: /tools/build + - title: About lit-element + url: /about + toc: + - title: About the lit-element project + url: /about/lit-element + - title: Technologies + url: /about/technologies + +docs: + - title: API Documentation + url: /docs/ + toc: + - title: Create your first custom element + url: /docs/create + - title: Use your element in a web page + url: /try/use + - title: Add a property value to your element template + url: /try/properties + - title: Add a loop and an “if” statement to your template + url: /try/expressions + - title: Add an event handler to your template + url: /try/events + - title: Style your element template + url: /try/style \ No newline at end of file diff --git a/docs/_data/topics.yml b/docs/_data/topics.yml new file mode 100644 index 00000000..e2829d3c --- /dev/null +++ b/docs/_data/topics.yml @@ -0,0 +1,28 @@ +topics: + - title: Create an element + url: /docs/create + toc: + - title: Create an element + url: /docs/create/index + - title: Use typescript decorators to create an element class + url: /docs/create/typescript + - title: Define an element's render root + url: /docs/create/renderroot + - title: Designing web components + url: /docs/create/design + - title: Write a template + url: /docs/templates + toc: + - title: Write a template + url: /docs/templates/index + - title: Use plain JavaScript expressions in a template + url: /docs/templates/expressions + - title: Bind data to a child element in a template + url: /docs/templates/annotations + - title: Compose and nest lit-element templates + url: /docs/templates/compose + - title: Render light DOM children in a template + url: /docs/templates/slots + - title: Designing efficient LitElement templates + url: /docs/templates/design + diff --git a/docs/_includes/article.html b/docs/_includes/article.html new file mode 100644 index 00000000..f9852427 --- /dev/null +++ b/docs/_includes/article.html @@ -0,0 +1,61 @@ + +
+ {% assign parent = site.data.toc.toc | where:"url", page.parent %} + + {% if parent[0].url %} + + {{parent[0].title}} + + {%endif%} + +
+ +{% assign topic = site.data.topics.topics | where:"url", page.topic %} + +{% if topic[0] %} + +

{{topic[0].title}}

+In this topic: + + +
+ +

{{page.title}}

+ + + +{% else %} + +

{{page.title}}

+ +
+ +{% endif %} + + + +{{ content }} + +
+ + {% if page.prev %} + << {{page.prevtitle}} + {% endif %} + + + {% if page.next %} + {{page.nexttitle}} >> + {% endif %} + +
+ + diff --git a/docs/_includes/project.html b/docs/_includes/project.html new file mode 100644 index 00000000..69846d50 --- /dev/null +++ b/docs/_includes/project.html @@ -0,0 +1,3 @@ + + + diff --git a/docs/_includes/tocnav.html b/docs/_includes/tocnav.html new file mode 100644 index 00000000..cbf1a1da --- /dev/null +++ b/docs/_includes/tocnav.html @@ -0,0 +1,24 @@ + diff --git a/docs/_introduction.md b/docs/_introduction.md new file mode 100644 index 00000000..6efe01ad --- /dev/null +++ b/docs/_introduction.md @@ -0,0 +1,93 @@ +--- +layout: post +title: Introducing lit-element +--- + +lit-element is a light-weight library for creating custom elements with lit-html. + +Making custom elements is easy with lit-element: + +* [Write element templates in plain HTML.](introduction/) +* [React to property changes.](changes) +* [Use simple JavaScript expressions for loops and conditionals.](expressions) +* [Add event listeners in plain HTML.](listeners) + + + +## Write element templates in plain HTML + +Write your element templates in plain HTML. Use JavaScript expressions to insert data: + +```js +//custom-element.js + +render(){ + return html` +

${this.headingText}

+ `; +} +``` + + + +## React to property changes + +Create custom elements that update on property changes. lit-element creates DOM once, then re-renders only the stuff that changed - making DOM updates lightning-fast. + +```js +static get properties(){ + return { + myProp: String + } +} +constructor(){ + super(); + this.myProp='there'; + this.setTimeout(() => { + this.myProp='world'; + }, 3000); +} +render(){ + return html` +

hello ${this.myProp}

+ `; +} +``` + + + +## Use simple JavaScript expressions for loops and conditionals + +Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: + +```js +render(){ + return html` + + ${myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; +} +``` + + + + +## Add event listeners in plain HTML + +Use JavaScript expressions to add event listeners in plain HTML: + +```js +render({}){ + return html` + + `; +} +_clickHander(e){ + console.log(e.detail); +} +``` + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html new file mode 100644 index 00000000..5f0251fe --- /dev/null +++ b/docs/_layouts/default.html @@ -0,0 +1,38 @@ + + + {% if page.title %}{{ page.title }} –{% endif %} {{ site.name }} + + + + + + + + + + + + {{content}} + + + + diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html new file mode 100644 index 00000000..7b97ee5b --- /dev/null +++ b/docs/_layouts/post.html @@ -0,0 +1,28 @@ +--- +layout: default +--- + + +
+ + + +
+ {% include article.html %} +
+ +
+ + diff --git a/docs/_site/build/gh-pages/node_modules/@polymer/lit-element/lib/decorators.js b/docs/_site/build/gh-pages/node_modules/@polymer/lit-element/lib/decorators.js new file mode 100644 index 00000000..4fd37c48 --- /dev/null +++ b/docs/_site/build/gh-pages/node_modules/@polymer/lit-element/lib/decorators.js @@ -0,0 +1,81 @@ +/** + * @license + * Copyright (c) 2017 The Polymer Project Authors. All rights reserved. + * This code may only be used under the BSD style license found at + * http://polymer.github.io/LICENSE.txt + * The complete set of authors may be found at + * http://polymer.github.io/AUTHORS.txt + * The complete set of contributors may be found at + * http://polymer.github.io/CONTRIBUTORS.txt + * Code distributed by Google as part of the polymer project is also + * subject to an additional IP rights grant found at + * http://polymer.github.io/PATENTS.txt + */ + +/** + * Class decorator factory that defines the decorated class as a custom element. + * + * @param tagName the name of the custom element to define + * + * In TypeScript, the `tagName` passed to `customElement` must be a key of the + * `HTMLElementTagNameMap` interface. To add your element to the interface, + * declare the interface in this module: + * + * @customElement('my-element') + * export class MyElement extends LitElement {} + * + * declare global { + * interface HTMLElementTagNameMap { + * 'my-element': MyElement; + * } + * } + * + */ +export const customElement = tagName => clazz => { + window.customElements.define(tagName, clazz); // Cast as any because TS doesn't recognize the return type as being a + // subtype of the decorated class when clazz is typed as + // `Constructor` for some reason. `Constructor` + // is helpful to make sure the decorator is applied to elements however. + + return clazz; +}; +/** + * A property decorator which creates a LitElement property which reflects a + * corresponding attribute value. A `PropertyDeclaration` may optionally be + * supplied to configure property features. + */ + +export const property = options => (proto, name) => { + proto.constructor.createProperty(name, options); +}; +/** + * A property decorator that converts a class property into a getter that + * executes a querySelector on the element's renderRoot. + */ + +export const query = _query((target, selector) => target.querySelector(selector)); +/** + * A property decorator that converts a class property into a getter + * that executes a querySelectorAll on the element's renderRoot. + */ + +export const queryAll = _query((target, selector) => target.querySelectorAll(selector)); +/** + * Base-implementation of `@query` and `@queryAll` decorators. + * + * @param queryFn exectute a `selector` (ie, querySelector or querySelectorAll) + * against `target`. + */ + +function _query(queryFn) { + return selector => (proto, propName) => { + Object.defineProperty(proto, propName, { + get() { + return queryFn(this.renderRoot, selector); + }, + + enumerable: true, + configurable: true + }); + }; +} //# sourceMappingURL=decorators.js.map \ No newline at end of file diff --git a/docs/_site/build/gh-pages/node_modules/@polymer/lit-element/lib/updating-element.js b/docs/_site/build/gh-pages/node_modules/@polymer/lit-element/lib/updating-element.js new file mode 100644 index 00000000..3d8f0b56 --- /dev/null +++ b/docs/_site/build/gh-pages/node_modules/@polymer/lit-element/lib/updating-element.js @@ -0,0 +1,556 @@ +/** + * @license + * Copyright (c) 2017 The Polymer Project Authors. All rights reserved. + * This code may only be used under the BSD style license found at + * http://polymer.github.io/LICENSE.txt + * The complete set of authors may be found at + * http://polymer.github.io/AUTHORS.txt + * The complete set of contributors may be found at + * http://polymer.github.io/CONTRIBUTORS.txt + * Code distributed by Google as part of the polymer project is also + * subject to an additional IP rights grant found at + * http://polymer.github.io/PATENTS.txt + */ +// serializer/deserializers for boolean attribute +const fromBooleanAttribute = value => value !== null; + +const toBooleanAttribute = value => value ? '' : null; +/** + * Change function that returns true if `value` is different from `oldValue`. + * This method is used as the default for a property's `hasChanged` function. + */ + + +export const notEqual = (value, old) => { + // This ensures (old==NaN, value==NaN) always returns false + return old !== value && (old === old || value === value); +}; +const defaultPropertyDeclaration = { + attribute: true, + type: String, + reflect: false, + hasChanged: notEqual +}; +const microtaskPromise = new Promise(resolve => resolve(true)); +const STATE_HAS_UPDATED = 1; +const STATE_UPDATE_REQUESTED = 1 << 2; +const STATE_IS_REFLECTING = 1 << 3; +/** + * Base element class which manages element properties and attributes. When + * properties change, the `update` method is asynchronously called. This method + * should be supplied by subclassers to render updates as desired. + */ + +export class UpdatingElement extends HTMLElement { + constructor() { + super(); + this._updateState = 0; + this._instanceProperties = undefined; + this._updatePromise = microtaskPromise; + /** + * Map with keys for any properties that have changed since the last + * update cycle with previous values. + */ + + this._changedProperties = new Map(); + /** + * Map with keys of properties that should be reflected when updated. + */ + + this._reflectingProperties = undefined; + this.initialize(); + } + /** + * Returns a list of attributes corresponding to the registered properties. + */ + + + static get observedAttributes() { + // note: piggy backing on this to ensure we're _finalized. + this._finalize(); + + const attributes = []; + + for (const [p, v] of this._classProperties) { + const attr = this._attributeNameForProperty(p, v); + + if (attr !== undefined) { + this._attributeToPropertyMap.set(attr, p); + + attributes.push(attr); + } + } + + return attributes; + } + /** + * Creates a property accessor on the element prototype if one does not exist. + * The property setter calls the property's `hasChanged` property option + * or uses a strict identity check to determine whether or not to request + * an update. + */ + + + static createProperty(name, options = defaultPropertyDeclaration) { + // ensure private storage for property declarations. + if (!this.hasOwnProperty('_classProperties')) { + this._classProperties = new Map(); // NOTE: Workaround IE11 not supporting Map constructor argument. + + const superProperties = Object.getPrototypeOf(this)._classProperties; + + if (superProperties !== undefined) { + superProperties.forEach((v, k) => this._classProperties.set(k, v)); + } + } + + this._classProperties.set(name, options); // Allow user defined accessors by not replacing an existing own-property + // accessor. + + + if (this.prototype.hasOwnProperty(name)) { + return; + } + + const key = typeof name === 'symbol' ? Symbol() : `__${name}`; + Object.defineProperty(this.prototype, name, { + get() { + return this[key]; + }, + + set(value) { + const oldValue = this[name]; + this[key] = value; + + this._requestPropertyUpdate(name, oldValue, options); + }, + + configurable: true, + enumerable: true + }); + } + /** + * Creates property accessors for registered properties and ensures + * any superclasses are also finalized. + */ + + + static _finalize() { + if (this.hasOwnProperty('_finalized') && this._finalized) { + return; + } // finalize any superclasses + + + const superCtor = Object.getPrototypeOf(this); + + if (typeof superCtor._finalize === 'function') { + superCtor._finalize(); + } + + this._finalized = true; // initialize Map populated in observedAttributes + + this._attributeToPropertyMap = new Map(); // make any properties + + const props = this.properties; // support symbols in properties (IE11 does not support this) + + const propKeys = [...Object.getOwnPropertyNames(props), ...(typeof Object.getOwnPropertySymbols === 'function' ? Object.getOwnPropertySymbols(props) : [])]; + + for (const p of propKeys) { + // note, use of `any` is due to TypeSript lack of support for symbol in + // index types + this.createProperty(p, props[p]); + } + } + /** + * Returns the property name for the given attribute `name`. + */ + + + static _attributeNameForProperty(name, options) { + const attribute = options !== undefined && options.attribute; + return attribute === false ? undefined : typeof attribute === 'string' ? attribute : typeof name === 'string' ? name.toLowerCase() : undefined; + } + /** + * Returns true if a property should request an update. + * Called when a property value is set and uses the `hasChanged` + * option for the property if present or a strict identity check. + */ + + + static _valueHasChanged(value, old, hasChanged = notEqual) { + return hasChanged(value, old); + } + /** + * Returns the property value for the given attribute value. + * Called via the `attributeChangedCallback` and uses the property's `type` + * or `type.fromAttribute` property option. + */ + + + static _propertyValueFromAttribute(value, options) { + const type = options && options.type; + + if (type === undefined) { + return value; + } // Note: special case `Boolean` so users can use it as a `type`. + + + const fromAttribute = type === Boolean ? fromBooleanAttribute : typeof type === 'function' ? type : type.fromAttribute; + return fromAttribute ? fromAttribute(value) : value; + } + /** + * Returns the attribute value for the given property value. If this + * returns undefined, the property will *not* be reflected to an attribute. + * If this returns null, the attribute will be removed, otherwise the + * attribute will be set to the value. + * This uses the property's `reflect` and `type.toAttribute` property options. + */ + + + static _propertyValueToAttribute(value, options) { + if (options === undefined || options.reflect === undefined) { + return; + } // Note: special case `Boolean` so users can use it as a `type`. + + + const toAttribute = options.type === Boolean ? toBooleanAttribute : options.type && options.type.toAttribute || String; + return toAttribute(value); + } + /** + * Performs element initialization. By default this calls `createRenderRoot` + * to create the element `renderRoot` node and captures any pre-set values for + * registered properties. + */ + + + initialize() { + this.renderRoot = this.createRenderRoot(); + + this._saveInstanceProperties(); + } + /** + * Fixes any properties set on the instance before upgrade time. + * Otherwise these would shadow the accessor and break these properties. + * The properties are stored in a Map which is played back after the + * constructor runs. Note, on very old versions of Safari (<=9) or Chrome + * (<=41), properties created for native platform properties like (`id` or + * `name`) may not have default values set in the element constructor. On + * these browsers native properties appear on instances and therefore their + * default value will overwrite any element default (e.g. if the element sets + * this.id = 'id' in the constructor, the 'id' will become '' since this is + * the native platform default). + */ + + + _saveInstanceProperties() { + for (const [p] of this.constructor._classProperties) { + if (this.hasOwnProperty(p)) { + const value = this[p]; + delete this[p]; + + if (!this._instanceProperties) { + this._instanceProperties = new Map(); + } + + this._instanceProperties.set(p, value); + } + } + } + /** + * Applies previously saved instance properties. + */ + + + _applyInstanceProperties() { + for (const [p, v] of this._instanceProperties) { + this[p] = v; + } + + this._instanceProperties = undefined; + } + /** + * Returns the node into which the element should render and by default + * creates and returns an open shadowRoot. Implement to customize where the + * element's DOM is rendered. For example, to render into the element's + * childNodes, return `this`. + * @returns {Element|DocumentFragment} Returns a node into which to render. + */ + + + createRenderRoot() { + return this.attachShadow({ + mode: 'open' + }); + } + /** + * Uses ShadyCSS to keep element DOM updated. + */ + + + connectedCallback() { + if (this._updateState & STATE_HAS_UPDATED) { + if (window.ShadyCSS !== undefined) { + window.ShadyCSS.styleElement(this); + } + } else { + this.requestUpdate(); + } + } + /** + * Synchronizes property values when attributes change. + */ + + + attributeChangedCallback(name, old, value) { + if (old !== value) { + this._attributeToProperty(name, value); + } + } + + _propertyToAttribute(name, value, options = defaultPropertyDeclaration) { + const ctor = this.constructor; + + const attrValue = ctor._propertyValueToAttribute(value, options); + + if (attrValue !== undefined) { + const attr = ctor._attributeNameForProperty(name, options); + + if (attr !== undefined) { + // Track if the property is being reflected to avoid + // setting the property again via `attributeChangedCallback`. Note: + // 1. this takes advantage of the fact that the callback is synchronous. + // 2. will behave incorrectly if multiple attributes are in the reaction + // stack at time of calling. However, since we process attributes + // in `update` this should not be possible (or an extreme corner case + // that we'd like to discover). + // mark state reflecting + this._updateState = this._updateState | STATE_IS_REFLECTING; + + if (attrValue === null) { + this.removeAttribute(attr); + } else { + this.setAttribute(attr, attrValue); + } // mark state not reflecting + + + this._updateState = this._updateState & ~STATE_IS_REFLECTING; + } + } + } + + _attributeToProperty(name, value) { + // Use tracking info to avoid deserializing attribute value if it was + // just set from a property setter. + if (!(this._updateState & STATE_IS_REFLECTING)) { + const ctor = this.constructor; + + const propName = ctor._attributeToPropertyMap.get(name); + + if (propName !== undefined) { + const options = ctor._classProperties.get(propName); + + this[propName] = ctor._propertyValueFromAttribute(value, options); + } + } + } + /** + * Requests an update which is processed asynchronously. This should + * be called when an element should update based on some state not triggered + * by setting a property. In this case, pass no arguments. It should also be + * called when manually implementing a property setter. In this case, pass the + * property `name` and `oldValue` to ensure that any configured property + * options are honored. Returns the `updateComplete` Promise which is resolved + * when the update completes. + * + * @param name {PropertyKey} (optional) name of requesting property + * @param oldValue {any} (optional) old value of requesting property + * @returns {Promise} A Promise that is resolved when the update completes. + */ + + + requestUpdate(name, oldValue) { + if (name !== undefined) { + const options = this.constructor._classProperties.get(name) || defaultPropertyDeclaration; + return this._requestPropertyUpdate(name, oldValue, options); + } + + return this._invalidate(); + } + /** + * Requests an update for a specific property and records change information. + * @param name {PropertyKey} name of requesting property + * @param oldValue {any} old value of requesting property + * @param options {PropertyDeclaration} + */ + + + _requestPropertyUpdate(name, oldValue, options) { + if (!this.constructor._valueHasChanged(this[name], oldValue, options.hasChanged)) { + return this.updateComplete; + } // track old value when changing. + + + if (!this._changedProperties.has(name)) { + this._changedProperties.set(name, oldValue); + } // add to reflecting properties set + + + if (options.reflect === true) { + if (this._reflectingProperties === undefined) { + this._reflectingProperties = new Map(); + } + + this._reflectingProperties.set(name, options); + } + + return this._invalidate(); + } + /** + * Invalidates the element causing it to asynchronously update regardless + * of whether or not any property changes are pending. This method is + * automatically called when any registered property changes. + */ + + + async _invalidate() { + if (!this._hasRequestedUpdate) { + // mark state updating... + this._updateState = this._updateState | STATE_UPDATE_REQUESTED; + let resolver; + const previousValidatePromise = this._updatePromise; + this._updatePromise = new Promise(r => resolver = r); + await previousValidatePromise; + + this._validate(); + + resolver(!this._hasRequestedUpdate); + } + + return this.updateComplete; + } + + get _hasRequestedUpdate() { + return this._updateState & STATE_UPDATE_REQUESTED; + } + /** + * Validates the element by updating it. + */ + + + _validate() { + // Mixin instance properties once, if they exist. + if (this._instanceProperties) { + this._applyInstanceProperties(); + } + + if (this.shouldUpdate(this._changedProperties)) { + const changedProperties = this._changedProperties; + this.update(changedProperties); + + this._markUpdated(); + + if (!(this._updateState & STATE_HAS_UPDATED)) { + this._updateState = this._updateState | STATE_HAS_UPDATED; + this.firstUpdated(changedProperties); + } + + this.updated(changedProperties); + } else { + this._markUpdated(); + } + } + + _markUpdated() { + this._changedProperties = new Map(); + this._updateState = this._updateState & ~STATE_UPDATE_REQUESTED; + } + /** + * Returns a Promise that resolves when the element has completed updating. + * The Promise value is a boolean that is `true` if the element completed the + * update without triggering another update. The Promise result is `false` if + * a property was set inside `updated()`. This getter can be implemented to + * await additional state. For example, it is sometimes useful to await a + * rendered element before fulfilling this Promise. To do this, first await + * `super.updateComplete` then any subsequent state. + * + * @returns {Promise} The Promise returns a boolean that indicates if the + * update resolved without triggering another update. + */ + + + get updateComplete() { + return this._updatePromise; + } + /** + * Controls whether or not `update` should be called when the element requests + * an update. By default, this method always returns `true`, but this can be + * customized to control when to update. + * + * * @param _changedProperties Map of changed properties with old values + */ + + + shouldUpdate(_changedProperties) { + return true; + } + /** + * Updates the element. This method reflects property values to attributes. + * It can be overridden to render and keep updated DOM in the element's + * `renderRoot`. Setting properties inside this method will *not* trigger + * another update. + * + * * @param _changedProperties Map of changed properties with old values + */ + + + update(_changedProperties) { + if (this._reflectingProperties !== undefined && this._reflectingProperties.size > 0) { + for (const [k, v] of this._reflectingProperties) { + this._propertyToAttribute(k, this[k], v); + } + + this._reflectingProperties = undefined; + } + } + /** + * Invoked whenever the element is updated. Implement to perform + * post-updating tasks via DOM APIs, for example, focusing an element. + * + * Setting properties inside this method will trigger the element to update + * again after this update cycle completes. + * + * * @param _changedProperties Map of changed properties with old values + */ + + + updated(_changedProperties) {} + /** + * Invoked when the element is first updated. Implement to perform one time + * work on the element after update. + * + * Setting properties inside this method will trigger the element to update + * again after this update cycle completes. + * + * * @param _changedProperties Map of changed properties with old values + */ + + + firstUpdated(_changedProperties) {} + +} +/** + * Maps attribute names to properties; for example `foobar` attribute + * to `fooBar` property. + */ + +UpdatingElement._attributeToPropertyMap = new Map(); +/** + * Marks class as having finished creating properties. + */ + +UpdatingElement._finalized = true; +/** + * Memoized list of all class properties, including any superclass properties. + */ + +UpdatingElement._classProperties = new Map(); +UpdatingElement.properties = {}; //# sourceMappingURL=updating-element.js.map \ No newline at end of file diff --git a/docs/_site/build/gh-pages/node_modules/@stackblitz/sdk/bundles/sdk.m.js b/docs/_site/build/gh-pages/node_modules/@stackblitz/sdk/bundles/sdk.m.js new file mode 100644 index 00000000..3bb70d8e --- /dev/null +++ b/docs/_site/build/gh-pages/node_modules/@stackblitz/sdk/bundles/sdk.m.js @@ -0,0 +1,189 @@ +var e = "300"; + +function t() { + return Math.random().toString(36).substring(7); +} + +function n(e) { + var t = ""; + return e ? (e.forceEmbedLayout && (t += "embed=1"), e.clickToLoad && (t += (t.length ? "&" : "") + "ctl=1"), e.openFile && (t += (t.length ? "&" : "") + "file=" + e.openFile), !e.view || "preview" !== e.view && "editor" !== e.view || (t += (t.length ? "&" : "") + "view=" + e.view), e.hideExplorer && (t += (t.length ? "&" : "") + "hideExplorer=1"), e.hideNavigation && (t += (t.length ? "&" : "") + "hideNavigation=1;"), e.hideDevTools && (t += (t.length ? "&" : "") + "hidedevtools=1"), "number" == typeof e.devToolsHeight && e.devToolsHeight > 0 && e.devToolsHeight < 100 && (t += (t.length ? "&" : "") + "devtoolsheight=" + e.devToolsHeight), t.length ? "?" + t : t) : t; +} + +function i(t, n, i) { + if (null === t.parentNode) throw new Error("Invalid Element"); + n.id = t.id, function (t, n) { + n && (n.hasOwnProperty("height") && (t.height = "" + n.height), n.hasOwnProperty("width") && (t.width = "" + n.width)); + t.height || (t.height = e); + t.width || t.setAttribute("style", "width:100%;"); + }(n, i), t.parentNode.replaceChild(n, t); +} + +function o(e) { + if ("string" == typeof e) { + var t = document.getElementById(e); + if (null !== t) return t; + } else if (e instanceof HTMLElement) return e; + + throw new Error("Invalid Element"); +} + +function r(e) { + return e && !1 === e.newWindow ? "_self" : "_blank"; +} + +var a = function (e) { + var t = this; + this.pending = {}, this.port = e, this.port.onmessage = function (e) { + if (e.data.payload.__reqid) { + var n = e.data.payload.__reqid, + i = e.data.payload.__success; + + if (t.pending[n]) { + if (delete e.data.payload.__reqid, delete e.data.payload.__success, i) { + var o = 0 === Object.keys(e.data.payload).length && e.data.payload.constructor === Object ? null : e.data.payload; + t.pending[n].resolve(o); + } else { + t.pending[n].reject(e.data.payload.error ? e.data.type + ": " + e.data.payload.error : e.data.type); + } + + delete t.pending[n]; + } + } + }; +}; + +a.prototype.request = function (e) { + var n = this, + i = t(); + return new Promise(function (t, o) { + n.pending[i] = { + resolve: t, + reject: o + }, e.payload.__reqid = i, n.port.postMessage(e); + }); +}; + +var d = function (e, t) { + var n = this; + this.rdc = new a(e), this.preview = {}, Object.defineProperty(this.preview, "origin", { + value: t.previewOrigin, + writable: !1 + }), this.editor = { + openFile: function (e) { + return n.rdc.request({ + type: "SDK_OPEN_FILE", + payload: { + path: e + } + }); + } + }; +}; + +d.prototype.applyFsDiff = function (e) { + return this.rdc.request({ + type: "SDK_APPLY_FS_DIFF", + payload: e + }); +}, d.prototype.getFsSnapshot = function () { + return this.rdc.request({ + type: "SDK_GET_FS_SNAPSHOT", + payload: {} + }); +}, d.prototype.getDependencies = function () { + return this.rdc.request({ + type: "SDK_GET_DEPS_SNAPSHOT", + payload: {} + }); +}; +var c = [], + s = ["typescript", "create-react-app", "angular-cli", "javascript"], + p = "https://stackblitz.com/run"; + +function l(e, t) { + var n = document.createElement("input"); + return n.type = "hidden", n.name = e, n.value = t, n; +} + +function u(e) { + if (-1 === s.indexOf(e.template)) throw new Error("Unsupported project template, must be one of: " + s.join(", ")); + var t = document.createElement("form"); + return t.method = "POST", t.setAttribute("style", "display:none;"), t.appendChild(l("project[title]", e.title)), t.appendChild(l("project[description]", e.description)), t.appendChild(l("project[template]", e.template)), e.tags && e.tags.forEach(function (e) { + t.appendChild(l("project[tags][]", e)); + }), e.dependencies && t.appendChild(l("project[dependencies]", JSON.stringify(e.dependencies))), e.settings && t.appendChild(l("project[settings]", JSON.stringify(e.settings))), Object.keys(e.files).forEach(function (n) { + t.appendChild(l("project[files][" + n + "]", e.files[n])); + }), t; +} + +var h = { + connect: function (e) { + if (!e || !e.contentWindow) return Promise.reject("Provided element is not an iframe."); + var n, + i, + o = (i = (n = e) instanceof Element ? "element" : "id", c.find(function (e) { + return e[i] === n; + }) || null); + return o ? o.pending : new function (e) { + var n = this; + this.id = t(), this.element = e, this.pending = new Promise(function (e, t) { + var i = function (t) { + t.data.action && "SDK_INIT_SUCCESS" === t.data.action && t.data.id === n.id && (n.vm = new d(t.ports[0], t.data.payload), e(n.vm), r()); + }, + o = function () { + n.element.contentWindow && n.element.contentWindow.postMessage({ + action: "SDK_INIT", + id: n.id + }, "*"); + }; + + function r() { + window.clearInterval(s), window.removeEventListener("message", i); + } + + window.addEventListener("message", i), o(); + var a = 0, + s = window.setInterval(function () { + if (n.vm) r();else { + if (a >= 20) return r(), t("Timeout: Unable to establish a connection with the StackBlitz VM"), void c.forEach(function (e, t) { + e.id === n.id && c.splice(t, 1); + }); + a++, o(); + } + }, 500); + }), c.push(this); + }(e).pending; + }, + openGithubProject: function (e, t) { + window.open("https://stackblitz.com/github/" + e + n(t), r(t)); + }, + openProject: function (e, t) { + !function (e, t) { + var i = u(e); + i.action = p + n(t), i.target = r(t), document.body.appendChild(i), i.submit(), document.body.removeChild(i); + }(e, t); + }, + openProjectId: function (e, t) { + window.open("https://stackblitz.com/edit/" + e + n(t), r(t)); + }, + embedGithubProject: function (e, t, r) { + var a = o(e), + d = document.createElement("iframe"); + return d.src = "https://stackblitz.com/github/" + t + n(r), i(a, d, r), h.connect(d); + }, + embedProject: function (e, t, r) { + var a = o(e), + d = function (e, t) { + var i = u(e); + return i.action = p + n(t), i.id = "sb", "" + i.outerHTML + " + + + + + +
+

+ lit-element docs +

+ + + + + +
+ + + + + \ No newline at end of file diff --git a/docs/_site/build/gh-pages/src/index.js b/docs/_site/build/gh-pages/src/index.js new file mode 100644 index 00000000..dbd2e393 --- /dev/null +++ b/docs/_site/build/gh-pages/src/index.js @@ -0,0 +1,3 @@ +import './stack-blitz.js'; +import './project-loader.js'; +import './project-displayer.js'; \ No newline at end of file diff --git a/docs/_site/build/gh-pages/src/project-displayer.bak b/docs/_site/build/gh-pages/src/project-displayer.bak new file mode 100644 index 00000000..d113c3b6 --- /dev/null +++ b/docs/_site/build/gh-pages/src/project-displayer.bak @@ -0,0 +1,132 @@ +import {LitElement, html} from '@polymer/lit-element'; +import './project-loader.js'; + +class ProjectDisplayer extends LitElement { + static get properties(){ + return { + folder: { type: String }, + + clickToLoad: { type: Boolean }, + forceEmbedLayout: { type: Boolean }, + view: { type: String }, + openFile: { type: String }, + height: { type: Number }, + + options: { type: Object }, + project: { type: Object } + }; + } + updateSelectedFile(i){ + var filenames = this.shadowRoot.getElementById('filenames').getElementsByClassName('filename'); + for (var el = 0; el < filenames.length; el++) { + console.log(filenames[el]); + filenames[el].className = 'filename'; + }; + var filecontents = this.shadowRoot.getElementById('filecontents').getElementsByClassName('filecontents'); + for (var el = 0; el < filecontents.length; el++) { + filecontents[el].className = 'filecontents'; + filecontents[el].style.display = 'none'; + }; + + this.shadowRoot.getElementById('filename-' + i).className += ' selected'; + this.shadowRoot.getElementById('contents-' + i).className += ' selected'; + this.shadowRoot.getElementById('contents-' + i).style.display = 'block'; + } + + constructor(){ + super(); + this.project={}; + } + render(){ + var filenames=[]; + if(this.project.files) var filenames=Object.keys(this.project.files); + return html` + + + +
+
${filenames.map(i => html` + ${i} + `)} + +
+
${filenames.map(i => html` +
+ 
${this.project.files[i]}
+
`)} +
+
+ + `; + } + firstUpdated(){ + this.options=Object.assign({}, this.options, { + 'clickToLoad':this.clickToLoad, + 'forceEmbedLayout':this.forceEmbedLayout, + 'view':this.view?this.view:'both', + 'openFile':this.openFile?this.openFile:'index.html', + 'height':this.height?this.height:(window.innerHeight-10)/2 + }); + } + + toggle(){ + var dynamicsample = this.shadowRoot.getElementById("dynamicsample").style.display; + this.shadowRoot.getElementById("dynamicsample").style.display = + this.shadowRoot.getElementById("staticsample").style.display; + this.shadowRoot.getElementById("staticsample").style.display = dynamicsample; + + } + displayProject(project){ + this.project = Object.assign({}, project); + this.requestUpdate(); + this.embedProject(project); + this.shadowRoot.getElementById('toggle').disabled = false; + } + async embedProject(project){ + var slot = this.shadowRoot.getElementById("slot"); + var embed = slot.assignedNodes()[0]; + if(embed.tagName=='STACK-BLITZ'){ + return embed.embedProject(project, this.options); + } else console.log('Put in light DOM to embed a code sample.') + } +} + +customElements.define('project-displayer', ProjectDisplayer); diff --git a/docs/_site/build/gh-pages/src/project-displayer.js b/docs/_site/build/gh-pages/src/project-displayer.js new file mode 100644 index 00000000..c58b707f --- /dev/null +++ b/docs/_site/build/gh-pages/src/project-displayer.js @@ -0,0 +1,83 @@ +import { LitElement, html } from "../node_modules/@polymer/lit-element/lit-element.js"; +import './project-loader.js'; + +class ProjectDisplayer extends LitElement { + static get properties() { + return { + folder: { + type: String + }, + clickToLoad: { + type: Boolean + }, + forceEmbedLayout: { + type: Boolean + }, + view: { + type: String + }, + openFile: { + type: String + }, + height: { + type: Number + }, + options: { + type: Object + }, + project: { + type: Object + } + }; + } + + constructor() { + super(); + this.project = {}; + } + + render() { + return html` + + + +
+ +
+ `; + } + + firstUpdated() { + this.options = Object.assign({}, this.options, { + 'clickToLoad': this.clickToLoad, + 'forceEmbedLayout': this.forceEmbedLayout, + 'view': this.view ? this.view : 'both', + 'openFile': this.openFile ? this.openFile : 'index.html', + 'height': this.height ? this.height : (window.innerHeight - 10) / 2 + }); + } + + displayProject(project) { + this.project = Object.assign({}, project); + this.requestUpdate(); + this.embedProject(project); + } + + async embedProject(project) { + var slot = this.shadowRoot.getElementById("slot"); + var embed = slot.assignedNodes()[0]; + + if (embed.tagName == 'STACK-BLITZ') { + return embed.embedProject(project, this.options); + } else console.log('Put in light DOM to embed a code sample.'); + } + +} + +customElements.define('project-displayer', ProjectDisplayer); \ No newline at end of file diff --git a/docs/_site/build/gh-pages/src/project-loader.js b/docs/_site/build/gh-pages/src/project-loader.js new file mode 100644 index 00000000..205d801d --- /dev/null +++ b/docs/_site/build/gh-pages/src/project-loader.js @@ -0,0 +1,79 @@ +import { LitElement, html } from "../node_modules/@polymer/lit-element/lit-element.js"; +export class ProjectLoader extends LitElement { + static get properties() { + return { + folder: { + type: String + }, + project: { + type: Object + } + }; + } + + render() { + return html``; + } + + firstUpdated() { + this.project = {}; + this.loadProject(); + } + + loadProject() { + if (this.folder == 'undefined') { + console.log("Missing folder property."); + return; + } else console.log('loading', this.folder); + + fetch(`${this.folder}/manifest.json`).then(response => { + return response.json(); + }).then(manifest => { + return this.getFiles(manifest).then(filesArray => { + var filesObject = filesArray.reduce((prev, curr) => { + return Object.assign({}, prev, curr); + }); + this.project = Object.assign({}, manifest, { + files: filesObject + }); + var projectLoadedEvent = new CustomEvent('project-loaded', { + detail: { + project: this.project + }, + bubbles: true + }); + return projectLoadedEvent; + }).then(projectLoadedEvent => { + this.dispatchEvent(projectLoadedEvent); + }).catch(error => { + console.log(error); + }); + }).catch(error => { + console.log(error); + }); + } + + getFiles(manifest) { + return Promise.all(manifest.files.map(filename => { + return fetch(`${this.folder}/${filename}`).then(result => { + return result.text().then(r => { + return { + [filename]: this.uglyHack(r) + }; + }).catch(error => { + console.log(error); + }); + }); + })).catch(error => { + console.log(error); + }); + } + + uglyHack(r) { + var regex = /\.\.\//g; + return r.replace("../node_modules/", "").replace(regex, ""); + } + +} +; +customElements.define('project-loader', ProjectLoader); \ No newline at end of file diff --git a/docs/_site/build/gh-pages/src/stack-blitz.js b/docs/_site/build/gh-pages/src/stack-blitz.js new file mode 100644 index 00000000..451f324b --- /dev/null +++ b/docs/_site/build/gh-pages/src/stack-blitz.js @@ -0,0 +1,75 @@ +import { LitElement, html } from "../node_modules/@polymer/lit-element/lit-element.js"; +import sdk from "../node_modules/@stackblitz/sdk/bundles/sdk.m.js"; +import "./project-loader.js"; + +class StackBlitz extends LitElement { + static get properties() { + return { + folder: { + type: String + }, + slot: { + type: String + }, + clickToLoad: { + type: Boolean + }, + forceEmbedLayout: { + type: Boolean + }, + view: { + type: String + }, + openFile: { + type: String + }, + height: { + type: Number + }, + options: { + type: Object + }, + project: { + type: Object + } + }; + } + + render() { + return html` + + ${this.slot == "embed" ? html`` : html` + + `} +
+ `; + } + + firstUpdated() { + this.options = Object.assign({}, this.options, { + 'clickToLoad': this.clickToLoad, + 'forceEmbedLayout': this.forceEmbedLayout, + 'view': this.view ? this.view : 'both', + 'openFile': this.openFile ? this.openFile : 'index.html', + 'height': this.height ? this.height : (window.innerHeight - 10) / 2 + }); + this.project = {}; + } + + embedProject(project, options) { + var embedIn = this.shadowRoot.getElementById('stackblitz'); + const vm = sdk.embedProject(embedIn, project, options); + } + +} + +; +customElements.define('stack-blitz', StackBlitz); \ No newline at end of file diff --git a/docs/_site/build/polymer.json b/docs/_site/build/polymer.json new file mode 100644 index 00000000..8f31bd7c --- /dev/null +++ b/docs/_site/build/polymer.json @@ -0,0 +1,20 @@ +{ + "entrypoint": "src/index.html", + "fragments": [], + "sources": [ + "src/**/*", + "src/index.html" + ], + "extraDependencies": [ + "bower_components/webcomponentsjs/*.js" + ], + "builds": [ + { + "name": "gh-pages", + "bundled": false + } + ], + "npm": true, + "componentDir": "node_modules/", + "moduleResolution": "node" +} \ No newline at end of file diff --git a/docs/_site/css/main.css b/docs/_site/css/main.css new file mode 100644 index 00000000..0fc6d85f --- /dev/null +++ b/docs/_site/css/main.css @@ -0,0 +1,473 @@ +html { + font-family: 'Roboto', 'Noto', sans-serif; + color: #333333; + font-size: 16px; +} + +body { + min-height: 101vh; + margin: 0; + color: #333333; + background-color: #FFF; + line-height: 1.5; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + text-rendering: optimizeLegibility; +} + +.breadcrumbs { + letter-spacing: 0.03em; +} + +hr { + border: 0; + height: 0; + border-top: 1px solid #dadce0; +} + +h1 { + margin-top: 16px; + margin-bottom: 16px; + font-weight: 400; + font-size: 24px; + letter-spacing: 0.03em; + color: #333333; +} +h2 { + margin-top: 16px; + margin-bottom: 16px; + font-weight: 500; + font-size: 20px; + letter-spacing: 0.03em; + color: #333333; +} +h3 { + margin-top: 32px; + margin-bottom: 16px; + font-weight: 400; + font-size: 18px; + letter-spacing: 0.03em; + color: #333333; +} + +a { + text-decoration: none; + color: inherit; +} + +.flex { + flex: 1; +} + +/* top nav */ +.main-nav { + position: relative; + display: flex; + align-items: center; + padding: 0 48px; + box-sizing: border-box; + font-size: 16px; + letter-spacing: 1px; + border-bottom: 1px solid #EEEBF3; + background: #333333; + color: white; +} + +.main-nav > ul { + list-style-type: none; + padding: 0; +} + +.main-nav > ul > li { + display: inline-block; + padding: 8px 0; + margin: 0 12px; +} + +.main-nav > ul > li:hover { + color: #FADE4B; +} + +#searchBox { + display: inline-block; + width: 200px; + background: white; + border: none; + font-family: inherit; + font-size: inherit; + color: black; + margin: 0 10px; + border-bottom: 1px solid 333333; + -webkit-appearance: textfield; +} + +#searchBox::-webkit-search-decoration { + -webkit-appearance: none; +} + +section { + padding: 60px 24px; + text-align: center; +} + +.devices { + display: block; + height: 460px; + background-image: url(https://user-images.githubusercontent.com/1369170/39715580-a1be5126-51e2-11e8-8440-96b07be03a3c.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center center; +} + +.main { + display: flex; + flex-direction: column; + align-items: center; + background-color: #FFF; +} + +.main-item { + display: flex; + max-width: 700px; + padding: 16px 0; + text-align: left; +} + +.main-item > img { + width: auto; + height: 100px; + padding-right: 32px; +} + +.compatibility { + background-color: #F2F2F2; +} + +.browsers > img { + width: 70px; + height: 70px; + padding: 20px; +} + +footer { + display: flex; + align-items: center; + justify-content: center; + padding: 0 14px; + background: #F2F3F4; + color: 333333; + border-top: 1px solid #dadce0; +} + +footer ul { + padding: 0; +} + +footer ul li { + display: inline-block; +} + +footer ul li::before { + padding: 0 14px; + content: '/'; + color: #333333; +} +footer a { + color: #333333; + font-size: 14px; +} + +/* doc page */ +.toc { + /* position: sticky works in Chrome, Firefox, Safari and Edge; + fallback to position: static for which the nav will just be part + of the scrolling content. */ + position: -webkit-sticky; + position: sticky; + top: 0; + left: 0; + width: 340px; + height: 300px; + box-sizing: border-box; + padding: 24px; +} + +.toc a:hover { + border-bottom: 2px solid #FADE4B; + -webkit-transition: -webkit-transform .3s ease; + -webkit-transition: transform .3s ease; + transition: transform .3s ease; +} + +.toc { + list-style-type: none; +} +.toc ul { + padding: 0 0 0 16px; +} + +.toc ul ul { + padding: 8px 0 0 40px; +} + +.toc li { + padding: 6px 0; + list-style-type: none; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + -webkit-transition: -webkit-transform .3s ease; + -webkit-transition: transform .3s ease; + transition: transform .3s ease; +} + +.toc > ul > li { + font-weight: bold; +} +.toc svg { + width: 24px; + height: 24px; + fill: currentcolor; + vertical-align: middle; +} +.toc span { + display: inline-block; + vertical-align: sub; + padding: 0 10px; +} + +.current { + font-weight: bold; +} + + + +article { + max-width: 860px; + padding: 40px; + margin: -300px 0 0 340px; + border-left: 1px solid #dadce0; + min-height: 70vh; +} + +article a { + color: #1e88e5; +} + +article h1 a { + color: #333333; +} + +article h2 a { + color: #333333; +} + +article a:hover { + text-decoration: underline; +} + +article img { + max-width: 100%; + box-sizing: border-box; + box-shadow: 0 1px 4px 0 333333; + margin: 20px auto; + display: block; +} + +article .bottomnav { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.inline img { + display: inline-block; + margin: 0; + vertical-align: middle; +} + +p.caption, b { + font-weight: 500; +} + +/* table of contents. align the first set of bullets with the title. */ +#table-of-contents + ul { + list-style-type: none; + padding: 0; +} +code, pre { + font-family: 'Roboto Mono', Consolas, monospace !important; +} + +code { + background: #F4F4F6; + color: 333333; + font-size: inherit; + padding: 2px 4px; + white-space: nowrap; +} + +pre code { + word-break: break-all; + padding: 0; + white-space: pre; +} +pre { + white-space: pre; + word-wrap: normal; + font-size: 14px; + padding: 24px; + background: #F4F4F6; + overflow-x: auto; +} + +table { + border-collapse: collapse; +} + +thead { + text-align: left; + background-color: #F9F8FB; + font-weight: 600; +} + +tr { + border-bottom: 1px solid #dadce0; +} + +th, td { + padding: 15px 20px; +} + +/* small screen */ +@media (max-width: 767px) { + /* home page */ + section { + padding: 24px; + } + + .devices { + height: 200px; + } + + .hero-buttons { + display: flex; + flex-direction: column; + align-items: center; + } + + .hero-buttons > * { + width: 240px; + margin: 8px 0; + } + + .features { + display: block; + } + + .feature { + display: block; + width: auto; + padding: 16px 0; + } + + .feature > .icon { + width: 48px; + height: 48px; + } + + .feature > p { + margin: 4px 0; + } + + .main { + display: block; + } + + .main-item { + display: block; + padding: 16px 0; + text-align: center; + } + + .main-item > img { + width: 48px; + height: auto; + padding: 0 0 4px 0; + } + + .main-item p { + margin: 4px 0; + } + + .browsers > img { + width: 40px; + height: 40px; + padding: 4px; + } + + /* doc page */ + .toc { + position: static; + width: auto; + height: auto; + padding: 16px 24px; + } + + article { + padding: 0 24px; + margin-top: 0; + margin-left: 0; + } + + .toc ul { + margin: 0; + padding: 0; + } + + footer { + flex-direction: column; + align-items: start; + } + footer ul { + margin: 0; + padding: 0; + } + + footer ul li::before { + display: none; + } + + footer ul li::after { + padding: 0 14px; + content: '/'; + color: 333333; + } + + .main-nav { + padding: 0 24px; + } +} + +@media (max-width: 575px) { + /* top nav */ + .main-nav { + flex-direction: column; + padding-top: 14px; + } + + .main-nav > ul { + display: flex; + width: 100%; + justify-content: space-between; + } + + .main-nav > ul > li { + margin: 0 4px; + } +} + +@media (max-width: 360px) { + .main-nav > ul > li { + font-size: 13px; + } +} diff --git a/docs/_site/css/pygments.css b/docs/_site/css/pygments.css new file mode 100644 index 00000000..b7f49be9 --- /dev/null +++ b/docs/_site/css/pygments.css @@ -0,0 +1,61 @@ +.highlight .hll { background-color: #ffffcc } +.highlight .c { color: #0099FF; font-style: italic } /* Comment */ +.xhighlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */ +.highlight .k { color: #006699; font-weight: bold } /* Keyword */ +.highlight .o { color: #555555 } /* Operator */ +.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #009999 } /* Comment.Preproc */ +.highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #FF0000 } /* Generic.Error */ +.highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */ +.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ +.highlight .go { color: #AAAAAA } /* Generic.Output */ +.highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */ +.highlight .gt { color: #99CC66 } /* Generic.Traceback */ +.highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */ +.highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */ +.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { color: #006699 } /* Keyword.Pseudo */ +.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #FF6600 } /* Literal.Number */ +.highlight .s { color: #CC3300 } /* Literal.String */ +.highlight .na { color: #330099 } /* Name.Attribute */ +.highlight .nb { color: #336666 } /* Name.Builtin */ +.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */ +.highlight .no { color: #336600 } /* Name.Constant */ +.highlight .nd { color: #9999FF } /* Name.Decorator */ +.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */ +.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #CC00FF } /* Name.Function */ +.highlight .nl { color: #9999FF } /* Name.Label */ +.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */ +.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */ +.highlight .nv { color: #003333 } /* Name.Variable */ +.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #FF6600 } /* Literal.Number.Float */ +.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */ +.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */ +.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */ +.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */ +.highlight .sc { color: #CC3300 } /* Literal.String.Char */ +.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ +.highlight .s2 { color: #CC3300 } /* Literal.String.Double */ +.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */ +.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */ +.highlight .si { color: #AA0000 } /* Literal.String.Interpol */ +.highlight .sx { color: #CC3300 } /* Literal.String.Other */ +.highlight .sr { color: #33AAAA } /* Literal.String.Regex */ +.highlight .s1 { color: #CC3300 } /* Literal.String.Single */ +.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */ +.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #003333 } /* Name.Variable.Class */ +.highlight .vg { color: #003333 } /* Name.Variable.Global */ +.highlight .vi { color: #003333 } /* Name.Variable.Instance */ +.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */ diff --git a/docs/_site/docs/create/design.html b/docs/_site/docs/create/design.html new file mode 100644 index 00000000..4219f931 --- /dev/null +++ b/docs/_site/docs/create/design.html @@ -0,0 +1,201 @@ + + + Designing web components – lit-element docs + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + diff --git a/docs/_site/docs/create/index.html b/docs/_site/docs/create/index.html new file mode 100644 index 00000000..91017e71 --- /dev/null +++ b/docs/_site/docs/create/index.html @@ -0,0 +1,273 @@ + + + Create an element – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + API Documentation + + + +
+ + + + + +

Create an element

+In this topic: + + +
+ +

Create an element

+ + + + + + + +

To add LitElement to your project:

+ +
npm install @polymer/lit-element --save
+
+ +

To create a new element:

+ +
    +
  • Import the LitElement base class and the html helper function.
    • +
  • Extend the LitElement base class.
    • +
  • Implement render to define a template for your element.
    • +
  • Register the new element with the browser.
    • +
+ +

Example

+ +

my-element.js

+ +
// Import the LitElement base class and html helper function
+import { LitElement, html } from '@polymer/lit-element';
+
+// Extend the LitElement base class
+class MyElement extends LitElement {
+
+  /**
+   * Implement `render` to define a template for your element.
+   *
+   * You must provide an implementation of `render` for any element
+   * that uses LitElement as a base class.
+   */
+  render(){
+    /** 
+     * `render` must return a lit-html `TemplateResult`. 
+     *
+     * To create a `TemplateResult`, tag a JavaScript template literal
+     * with the `html` helper function: 
+     */
+    return html`
+      <!-- template content -->
+      <p>A paragraph</p>
+    `;
+  }
+}
+// Register the new element with the browser.
+customElements.define('my-element', MyElement);
+
+
+ +

index.html

+ +
<!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>
+
+
+ + + + + + + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/docs/create/renderroot.html b/docs/_site/docs/create/renderroot.html new file mode 100644 index 00000000..763a8174 --- /dev/null +++ b/docs/_site/docs/create/renderroot.html @@ -0,0 +1,286 @@ + + + Define an element's render root – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + API Documentation + + + +
+ + + + + +

Create an element

+In this topic: + + +
+ +

Define an element's render root

+ + + + + + + +

+ +

About the render root

+ +

The render root is the node into which an element’s template is rendered. By default, LitElement creates an open shadowRoot and renders an element’s children inside it, producing a DOM structure looking something like this:

+ +
<my-element>
+  #shadow-root
+    <p>child 1</p>
+    <p>child 2</p>
+
+ +

You can customize the render root by implementing createRenderRoot.

+ +

+ +

Customize the render root

+ +

To customize the render root, implement createRenderRoot and return an element into which to render the template.

+ +

For example, to render into the element’s light DOM, return this:

+ +
class LightDom extends LitElement {
+  render(){
+    return html`
+      <p><b>Render root overridden.</b> Template renders in light DOM.</p>
+    `;
+  }
+  createRenderRoot(){
+    return this;
+  }
+}
+
+ +

Example

+ +

default-root.js

+ +
import { LitElement, html } from '@polymer/lit-element';
+
+/**
+ * This element renders its template into the default location:
+ * a shadowRoot created by LitElement.
+ */
+class DefaultRoot extends LitElement {
+  render(){
+    return html`
+      <p><b>Default render root.</b> Template renders in shadow DOM.</p>
+    `;
+  }
+}
+customElements.define('default-root', DefaultRoot);
+
+
+ +

light_dom.js

+ +
import { LitElement, html } from '@polymer/lit-element';
+
+/**
+ * This element renders its template as light DOM children.
+ */
+class LightDom extends LitElement {
+  render(){
+    return html`
+      <p><b>Render root overridden.</b> Template renders in light DOM.</p>
+    `;
+  }
+  /**
+   * To customize an element's render root, implement createRenderRoot. Return
+   * the node into which to render the element's template.
+   * 
+   * This element renders child nodes into its light DOM.
+   */
+  createRenderRoot(){
+    return this;
+  }
+}
+customElements.define('light-dom', LightDom);
+
+
+ + + + + + + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/docs/create/typescript.html b/docs/_site/docs/create/typescript.html new file mode 100644 index 00000000..34c74c7b --- /dev/null +++ b/docs/_site/docs/create/typescript.html @@ -0,0 +1,202 @@ + + + Use typescript decorators to create an element class – lit-element docs + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + diff --git a/docs/_site/docs/import.html b/docs/_site/docs/import.html new file mode 100644 index 00000000..49ecb3dc --- /dev/null +++ b/docs/_site/docs/import.html @@ -0,0 +1,251 @@ + + + Import an existing element – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + API Documentation + + + +
+ + + + + +

Import an existing element

+ +
+ + + + + +

Import and use a LitElement-based element in an HTML document or another element.

+ +

On this page:

+ + + +

+ +

Import and use a third-party element

+ +

To work with an existing LitElement-based element made by a third party, refer to the third party documentation for instructions on how to install the element and use it in your project.

+ +

Many elements are published on npm and can be installed from the command line:

+ +
cd my-project-folder
+npm install package-name --save
+
+ +

In an HTML document, an element published on npm can be imported from the node_modules folder:

+ +
<head>
+  <script type="module" src="node_modules/package-name/existing-element.js"></script>
+</head>
+<body>
+  <existing-element></existing-element>
+</body>
+
+ +

To import an existing element and use it in your own LitElement-based project:

+ +
import 'package-name/existing-element.js';
+
+class MyElement extends LitElement{
+  render(){
+    return html`
+      <existing-element></existing-element>
+    `;
+  }
+}
+customElements.define('existing-element', MyElement);
+
+ +
+ +

Package names must be transformed into URLs for a browser to load them. If you’re working with Polymer CLI, polymer serve and polymer build take care of this for you. See the Develop and deploy documentation for more info.

+ +
+ +

+ +

Import and use your own element

+ +

In an HTML document:

+ +
<head>
+  <script type="module" src="/path/to/my-element.js"></script>
+</head>
+<body>
+  <my-element></my-element>
+</body>
+
+ +

In another LitElement-based element:

+ +
// Use relative paths for peer dependencies
+import './my-element.js';
+
+class MyOtherElement extends LitElement{
+  render(){
+    return html`
+      <my-element></my-element>
+    `;
+  }
+}
+customElements.define('my-other-element', MyOtherElement);
+
+ + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/docs/index.html b/docs/_site/docs/index.html new file mode 100644 index 00000000..d4411d7a --- /dev/null +++ b/docs/_site/docs/index.html @@ -0,0 +1,169 @@ + + + API Documentation – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + + +

API Documentation

+ +
+ + + + + +

TODO: Draft this page

+ + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/docs/templates/annotations.html b/docs/_site/docs/templates/annotations.html new file mode 100644 index 00000000..69d6aa96 --- /dev/null +++ b/docs/_site/docs/templates/annotations.html @@ -0,0 +1,303 @@ + + + Bind data to a child element in a template – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + API Documentation + + + +
+ + + + + +

Write a template

+In this topic: + + +
+ +

Bind data to a child element in a template

+ + + + + + + +

Use lit-element annotations with JavaScript expressions to bind data from an element’s properties to a child element in its template.

+ +

Bind to a child element’s:

+ +
    +
  • +

    Text node:

    + + 
    html`<div>${this.prop1}</div>`
+
    +
    • +
  • +

    Attribute:

    + + 
    html`<div id="${this.prop2}"></div>`
+
    +
    • +
  • +

    Boolean attribute:

    + + 
    html`<span ?hidden="${this.prop3}">this should be hidden</span>`
+
    +
    • +
  • +

    Property:

    + + 
    html`<input type="checkbox" .value="${this.prop4}"/>`
+
    +
    • +
  • +

    Event handler:

    + + 
    html`<button id="pie" @click="${(e) => this.handlePls(e)}">pie?</button>`
+
    +
    • +
+ +

Example

+ +

custom-element.js

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

To share data from child elements to parent elements, use events. See … for more information.

+ + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/docs/templates/compose.html b/docs/_site/docs/templates/compose.html new file mode 100644 index 00000000..212921a8 --- /dev/null +++ b/docs/_site/docs/templates/compose.html @@ -0,0 +1,312 @@ + + + Compose and nest lit-element templates – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + API Documentation + + + +
+ + + + + +

Write a template

+In this topic: + + +
+ +

Compose and nest lit-element templates

+ + + + + + + +

You can compose LitElement templates from other LitElement templates:

+ +
class MyApp extends LitElement {
+  render(){
+    return html`
+      ${this.headerTemplate()}
+      ${this.navTemplate()}
+      ${this.footerTemplate()}
+    `;
+  }
+  static get headerTemplate(){
+    return html`...`;
+  }
+  static get navTemplate(){
+    return html`...`;
+  }
+  static get footerTemplate(){
+    return html`...`;
+  }
+}
+
+ +

Example

+ +

my-app.js

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

You can also compose templates by importing other elements and using them in a template:

+ +

my-app.js

+ +
import './header-element.js';
+import './nav-element.js';
+import './footer-element.js';
+
+class MyApp extends LitElement {
+  render(){
+    return html`
+      <header-element></header-element>
+      <nav-element></nav-element>
+      <footer-element></footer-element>
+    `;
+  }
+}
+
+ + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/docs/templates/design.html b/docs/_site/docs/templates/design.html new file mode 100644 index 00000000..e4489c80 --- /dev/null +++ b/docs/_site/docs/templates/design.html @@ -0,0 +1,364 @@ + + + Designing efficient LitElement templates – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + API Documentation + + + +
+ + + + + +

Write a template

+In this topic: + + +
+ +

Designing efficient LitElement templates

+ + + + + + + +
+ +

Summary

+ +

LitElement-based elements render and re-render asynchronously, updating in response to batched property changes. To maximize performance, design your element templates as a function of element properties.

+ +
+ +

Efficient rendering

+ +

LitElement templates react to property changes. By default, all of an element’s properties are observed, and a change to any one of them will trigger an update.

+ +

Updates are processed asynchronously, so that an element re-renders in response to a batch of property changes. Using lit-html to render and re-render templates, only the DOM nodes that change are re-drawn.

+ +

This improves performance and ensures consistent state between and during property changes.

+ +

The element below updates whenever either of its properties changes. Only the parts of the DOM that change are re-rendered.

+ +

my-element.js

+ +
import { LitElement, html } from '@polymer/lit-element';
+
+class MyElement extends LitElement {
+  static get properties(){
+    return {
+      prop1: Number,
+      prop2: Number
+    };
+  }
+  constructor(){
+    super();
+    this.prop1=0;
+    this.prop2=1;
+  }
+  render(){
+    return html`
+      <p>Static paragraph.</p>
+      <p>prop1: ${this.prop1}</p>
+      <button @click="${() => this.changeMe('prop1')}">change prop1</button>
+      <button @click="${() => this.changeMe('prop2')}">change prop2</button>
+    `;
+  }
+  updated(){
+    console.log('Updated');
+  }
+  changeMe(prop){
+    var rand = Math.floor(Math.random()*100);
+    prop=='prop1'?this.prop1=rand:this.prop2=rand;
+  }
+}
+customElements.define('my-element', MyElement);
+
+
+ + + + + +

Design templates as a function of properties

+ +

To maximize the benefits of using the LitElement library, we recommend that you design your element’s template as a pure function of its properties.

+ +

This means that an element’s render function

+ +
    +
  • should not change the element’s state.
    • +
  • should not have side effects.
    • +
  • should not depend on anything except the element’s properties.
    • +
  • should return the same result when given the same inputs; that is, with the same set of property values, you should get the same template.
    • +
+ +

We also recommend that you avoid manipulating DOM. Instead, express the element’s template as a function of its state, and capture element state in properties.

+ +

Example

+ +

The following element uses inefficient DOM manipulation:

+ +

dom-manip.js

+ +
import { LitElement, html } from '@polymer/lit-element';
+
+/**
+ * Anti-pattern. Avoid manipulating DOM.
+ */
+class DomManip extends LitElement {
+  constructor(){
+    super();
+    this.addEventListener('stuff-loaded', this.doSomething.bind(this));
+    this.loadStuff();
+  }
+  render(){
+    return html`
+      <p id="message">Loading</p>
+    `;
+  }
+  doSomething(){
+    this.shadowRoot.getElementById('message').innerHTML='Loading complete.';
+  }
+  loadStuff(){
+    setInterval(() => {
+      var loaded = new CustomEvent('stuff-loaded', { detail: {}});
+      this.dispatchEvent(loaded);
+    }, 3000);
+  }
+}
+customElements.define('dom-manip', DomManip);
+
+
+ +

Rewrite the element’s template as a function of its properties by capturing the load message as a property, and setting the property in response to the event:

+ +

update-properties.js

+ +
import { LitElement, html } from '@polymer/lit-element';
+
+/**
+ * Use this pattern instead.
+ */
+class UpdateProperties extends LitElement {
+  static get properties(){
+    return {
+      message: String
+    };
+  }
+  constructor(){
+    super();
+    this.message='Loading';
+    this.addEventListener('stuff-loaded', this.doSomething.bind(this));
+    this.loadStuff();
+  }
+  render(){
+    return html`
+      <p>${this.message}</p>
+    `;
+  }
+  doSomething(){
+    this.message='Loading complete.';
+  }
+  loadStuff(){
+    setInterval(() => {
+      var loaded = new CustomEvent('stuff-loaded', { detail: {}});
+      this.dispatchEvent(loaded);
+    }, 3000);
+  }
+}
+
+customElements.define('update-properties', UpdateProperties);
+
+
+ + + + + + + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/docs/templates/expressions.html b/docs/_site/docs/templates/expressions.html new file mode 100644 index 00000000..0adf260c --- /dev/null +++ b/docs/_site/docs/templates/expressions.html @@ -0,0 +1,211 @@ + + + Use plain JavaScript expressions in a template – lit-element docs + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + diff --git a/docs/_site/docs/templates/index.html b/docs/_site/docs/templates/index.html new file mode 100644 index 00000000..c3b0e6a9 --- /dev/null +++ b/docs/_site/docs/templates/index.html @@ -0,0 +1,211 @@ + + + Write a template – lit-element docs + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + diff --git a/docs/_site/docs/templates/slots.html b/docs/_site/docs/templates/slots.html new file mode 100644 index 00000000..85a2b367 --- /dev/null +++ b/docs/_site/docs/templates/slots.html @@ -0,0 +1,326 @@ + + + Render light DOM children in a template – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + API Documentation + + + +
+ + + + + +

Write a template

+In this topic: + + +
+ +

Render light DOM children in a template

+ + + + + + + +

On this page:

+ + + +

+ +

Render light DOM children with the slot element

+ +

To render an element’s light DOM children in shadow DOM, use the <slot> element:

+ +

my-element.js

+ +
render(){
+  return html`
+    <div>
+      <slot></slot>
+    </div>
+  `;
+}
+
+ +

index.html

+ +
<my-element>
+  <p>Pls include me</p>
+</my-element>
+
+ +

+ +

Named slots

+ +

You can render light DOM children in a specific slot by ensuring that the slot’s name attribute matches the light DOM child’s slot attribute:

+ +

my-element.js

+ +
render(){
+  return html`
+    <div>
+      <slot></slot>
+      <slot name="one"></slot>
+    </div>
+  `;
+}
+
+ +

index.html

+ +
<my-element>
+  <p slot="one">Pls include me in slot "one"</p>
+</my-element>
+
+ +
    +
  • +

    Named slots will only match light DOM children whose slot attribute matches their name attribute.

    +
    • +
  • +

    Light DOM children with a specified slot attribute will only match slots with a matching name attribute.

    +
    • +
  • +

    An un-named slot is called the “default” slot. Any number of light DOM children without a slot attribute may populate it.

    +
    • +
+ +

my-element.js

+ +
render(){
+  return html`
+    <div>
+      <slot name="one"></slot>
+      <slot name="two"></slot>
+      <slot></slot>
+    </div>
+  `;
+}
+
+ +

index.html

+ +
<my-element>
+  <p slot="one">Pls include me in slot "one"</p>
+  <p slot="three">I will not be in any slot.</p>
+  <p>I will be in the default slot.</p>
+  <p>So will I.</p>
+</my-element>
+
+ +

+ +

Use name, not id, to select slots

+ +

Note that a slot’s id attribute has no effect!

+ +

my-element.js

+ +
render(){
+  return html`
+    <div>
+      <slot id="one"></slot>
+    </div>
+  `;
+}
+
+ +

index.html

+ +
<my-element>
+  <p slot="one">nope</p>
+</my-element>
+
+ + + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/index.html b/docs/_site/index.html new file mode 100644 index 00000000..5fa44e4d --- /dev/null +++ b/docs/_site/index.html @@ -0,0 +1,177 @@ + + + lit-element – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + + +

lit-element

+ +
+ + + + + +

DONE: Create skeleton

+ +

TODO: Needs product manager input

+ +

lit-element is a lightweight library for creating custom elements.

+ +

Create fast, lightweight, reusable web components that work in any web page:

+ +
class MyElement extends LitElement{
+  // implemnt MyElement
+}
+
+ +
<my-element></my-element>
+
+ +

Write templates in plain HTML:

+ +
render(){ 
+  return html`<p>My element</p>`;
+}
+
+ +

Use simple JavaScript expressions to include properties, logic, and event handlers:

+ +
render(){ 
+  return html`
+    <!-- element property -->
+    <p>${this.myProp}</p>
+
+    <!-- loop -->
+    <ul>${myArray.map(i => html`<li>${i}</li>`)}</ul>
+
+    <!-- conditional -->
+    <div>${myBool?html`<p>true</p>`:html`<p>false</p>`}</div>
+
+    <!-- event handler -->
+    <button @click="${(e) => this.doStuff(e)}"></button>
+  `;
+}
+
+ +

Learn more:

+ + + + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/projects/docs/annotations/custom-element.js b/docs/_site/projects/docs/annotations/custom-element.js new file mode 100644 index 00000000..2ebc4eeb --- /dev/null +++ b/docs/_site/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` +
Bind to a child element's text node. ${this.prop1}
+ +
Bind to a child element's attribute.
+ +

Bind to a child element's boolean attribute. + +

+ +

Bind to a child element's property. + +

+ +

+ `; + } + handlePls(e){ + var id = e.target.id; + console.log(id + '.'); + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/docs/annotations/index.html b/docs/_site/projects/docs/annotations/index.html new file mode 100644 index 00000000..b036bb03 --- /dev/null +++ b/docs/_site/projects/docs/annotations/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/_site/projects/docs/annotations/index.ts b/docs/_site/projects/docs/annotations/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/docs/annotations/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/docs/annotations/manifest.json b/docs/_site/projects/docs/annotations/manifest.json new file mode 100644 index 00000000..9eca53a2 --- /dev/null +++ b/docs/_site/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" +} diff --git a/docs/_site/projects/docs/compose/index.html b/docs/_site/projects/docs/compose/index.html new file mode 100644 index 00000000..8779e6d2 --- /dev/null +++ b/docs/_site/projects/docs/compose/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_site/projects/docs/compose/index.ts b/docs/_site/projects/docs/compose/index.ts new file mode 100644 index 00000000..4bc604e5 --- /dev/null +++ b/docs/_site/projects/docs/compose/index.ts @@ -0,0 +1 @@ +import './my-app.js'; diff --git a/docs/_site/projects/docs/compose/manifest.json b/docs/_site/projects/docs/compose/manifest.json new file mode 100644 index 00000000..ebbc078f --- /dev/null +++ b/docs/_site/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" +} diff --git a/docs/_site/projects/docs/compose/my-app.js b/docs/_site/projects/docs/compose/my-app.js new file mode 100644 index 00000000..a6b465bf --- /dev/null +++ b/docs/_site/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` +
${this.headerText}
+ `; + } + static get navTemplate(){ + return html` + + `; + } + static get footerTemplate(){ + return html` +
${this.footerText}
+ `; + } + + render(){ + return html` + ${this.headerTemplate()} + ${this.navTemplate()} + ${this.footerTemplate()} + `; + } +} +customElements.define('my-app', MyApp); diff --git a/docs/_site/projects/docs/create/index.html b/docs/_site/projects/docs/create/index.html new file mode 100644 index 00000000..a3d38c6f --- /dev/null +++ b/docs/_site/projects/docs/create/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_site/projects/docs/create/index.ts b/docs/_site/projects/docs/create/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/docs/create/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/docs/create/manifest.json b/docs/_site/projects/docs/create/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_site/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" + } +} diff --git a/docs/_site/projects/docs/create/my-element.js b/docs/_site/projects/docs/create/my-element.js new file mode 100644 index 00000000..a337257a --- /dev/null +++ b/docs/_site/projects/docs/create/my-element.js @@ -0,0 +1,27 @@ +// Import the LitElement base class and html helper function +import { LitElement, html } from '@polymer/lit-element'; + +// Extend the LitElement base class +class MyElement extends LitElement { + + /** + * Implement `render` to define a template for your element. + * + * You must provide an implementation of `render` for any element + * that uses LitElement as a base class. + */ + render(){ + /** + * `render` must return a lit-html `TemplateResult`. + * + * To create a `TemplateResult`, tag a JavaScript template literal + * with the `html` helper function: + */ + return html` + +

A paragraph

+ `; + } +} +// Register the new element with the browser. +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/docs/renderroot/default-root.js b/docs/_site/projects/docs/renderroot/default-root.js new file mode 100644 index 00000000..7ab98752 --- /dev/null +++ b/docs/_site/projects/docs/renderroot/default-root.js @@ -0,0 +1,14 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * This element renders its template into the default location: + * a shadowRoot created by LitElement. + */ +class DefaultRoot extends LitElement { + render(){ + return html` +

Default render root. Template renders in shadow DOM.

+ `; + } +} +customElements.define('default-root', DefaultRoot); diff --git a/docs/_site/projects/docs/renderroot/index.html b/docs/_site/projects/docs/renderroot/index.html new file mode 100644 index 00000000..3c646990 --- /dev/null +++ b/docs/_site/projects/docs/renderroot/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_site/projects/docs/renderroot/index.ts b/docs/_site/projects/docs/renderroot/index.ts new file mode 100644 index 00000000..e4a842ca --- /dev/null +++ b/docs/_site/projects/docs/renderroot/index.ts @@ -0,0 +1,2 @@ +import './default-root.js'; +import './light-dom.js'; diff --git a/docs/_site/projects/docs/renderroot/light-dom.js b/docs/_site/projects/docs/renderroot/light-dom.js new file mode 100644 index 00000000..3fc68ecf --- /dev/null +++ b/docs/_site/projects/docs/renderroot/light-dom.js @@ -0,0 +1,22 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * This element renders its template as light DOM children. + */ +class LightDom extends LitElement { + render(){ + return html` +

Render root overridden. Template renders in light DOM.

+ `; + } + /** + * To customize an element's render root, implement createRenderRoot. Return + * the node into which to render the element's template. + * + * This element renders child nodes into its light DOM. + */ + createRenderRoot(){ + return this; + } +} +customElements.define('light-dom', LightDom); diff --git a/docs/_site/projects/docs/renderroot/manifest.json b/docs/_site/projects/docs/renderroot/manifest.json new file mode 100644 index 00000000..160ee6a8 --- /dev/null +++ b/docs/_site/projects/docs/renderroot/manifest.json @@ -0,0 +1,15 @@ +{ + "files": [ + "default-root.js", + "light-dom.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" + } +} diff --git a/docs/_site/projects/docs/templates/dom-manip.js b/docs/_site/projects/docs/templates/dom-manip.js new file mode 100644 index 00000000..1b0b3f79 --- /dev/null +++ b/docs/_site/projects/docs/templates/dom-manip.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * Anti-pattern. Avoid manipulating DOM. + */ +class DomManip extends LitElement { + constructor(){ + super(); + this.addEventListener('stuff-loaded', this.doSomething.bind(this)); + this.loadStuff(); + } + render(){ + return html` +

Loading

+ `; + } + doSomething(){ + this.shadowRoot.getElementById('message').innerHTML='Loading complete.'; + } + loadStuff(){ + setInterval(() => { + var loaded = new CustomEvent('stuff-loaded', { detail: {}}); + this.dispatchEvent(loaded); + }, 3000); + } +} +customElements.define('dom-manip', DomManip); diff --git a/docs/_site/projects/docs/templates/index.html b/docs/_site/projects/docs/templates/index.html new file mode 100644 index 00000000..a4a8a4e9 --- /dev/null +++ b/docs/_site/projects/docs/templates/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_site/projects/docs/templates/index.ts b/docs/_site/projects/docs/templates/index.ts new file mode 100644 index 00000000..864cdbce --- /dev/null +++ b/docs/_site/projects/docs/templates/index.ts @@ -0,0 +1,2 @@ +import './dom-manip.js'; +import './update-properties.js'; diff --git a/docs/_site/projects/docs/templates/manifest.json b/docs/_site/projects/docs/templates/manifest.json new file mode 100644 index 00000000..46a95d75 --- /dev/null +++ b/docs/_site/projects/docs/templates/manifest.json @@ -0,0 +1,15 @@ +{ + "files": [ + "dom-manip.js", + "update-properties.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" + } +} diff --git a/docs/_site/projects/docs/templates/update-properties.js b/docs/_site/projects/docs/templates/update-properties.js new file mode 100644 index 00000000..2881f973 --- /dev/null +++ b/docs/_site/projects/docs/templates/update-properties.js @@ -0,0 +1,34 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * Use this pattern instead. + */ +class UpdateProperties extends LitElement { + static get properties(){ + return { + message: String + }; + } + constructor(){ + super(); + this.message='Loading'; + this.addEventListener('stuff-loaded', this.doSomething.bind(this)); + this.loadStuff(); + } + render(){ + return html` +

${this.message}

+ `; + } + doSomething(){ + this.message='Loading complete.'; + } + loadStuff(){ + setInterval(() => { + var loaded = new CustomEvent('stuff-loaded', { detail: {}}); + this.dispatchEvent(loaded); + }, 3000); + } +} + +customElements.define('update-properties', UpdateProperties); diff --git a/docs/_site/projects/docs/templates1/index.html b/docs/_site/projects/docs/templates1/index.html new file mode 100644 index 00000000..934071cf --- /dev/null +++ b/docs/_site/projects/docs/templates1/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_site/projects/docs/templates1/index.ts b/docs/_site/projects/docs/templates1/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/docs/templates1/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/docs/templates1/manifest.json b/docs/_site/projects/docs/templates1/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_site/projects/docs/templates1/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" + } +} diff --git a/docs/_site/projects/docs/templates1/my-element.js b/docs/_site/projects/docs/templates1/my-element.js new file mode 100644 index 00000000..5475bf2b --- /dev/null +++ b/docs/_site/projects/docs/templates1/my-element.js @@ -0,0 +1,31 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + prop1: Number, + prop2: Number + }; + } + constructor(){ + super(); + this.prop1=0; + this.prop2=1; + } + render(){ + return html` +

Static paragraph.

+

prop1: ${this.prop1}

+ + + `; + } + updated(){ + console.log('Updated'); + } + changeMe(prop){ + var rand = Math.floor(Math.random()*100); + prop=='prop1'?this.prop1=rand:this.prop2=rand; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/docs/tryexpressions/README.md b/docs/_site/projects/docs/tryexpressions/README.md new file mode 100644 index 00000000..36a075b5 --- /dev/null +++ b/docs/_site/projects/docs/tryexpressions/README.md @@ -0,0 +1,16 @@ +## Use simple JavaScript expressions for loops and conditionals + +Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: + +```js +render(){ + return html` +
    + ${myArray.map(i => html`
  • ${i}
    • `)} +
+ ${myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; +} +``` diff --git a/docs/_site/projects/docs/tryexpressions/custom-element.js b/docs/_site/projects/docs/tryexpressions/custom-element.js new file mode 100644 index 00000000..a5a6b9ce --- /dev/null +++ b/docs/_site/projects/docs/tryexpressions/custom-element.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + render(){ + return html` +
    + ${this.myArray.map(i => html`
  • ${i}
    • `)} +
+ ${this.myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/docs/tryexpressions/index.html b/docs/_site/projects/docs/tryexpressions/index.html new file mode 100644 index 00000000..eacfc6bb --- /dev/null +++ b/docs/_site/projects/docs/tryexpressions/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_site/projects/docs/tryexpressions/index.ts b/docs/_site/projects/docs/tryexpressions/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/docs/tryexpressions/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/docs/tryexpressions/manifest.json b/docs/_site/projects/docs/tryexpressions/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/_site/projects/docs/tryexpressions/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_site/projects/old/clone/README.md b/docs/_site/projects/old/clone/README.md new file mode 100644 index 00000000..9f42b1be --- /dev/null +++ b/docs/_site/projects/old/clone/README.md @@ -0,0 +1,93 @@ +To make sure object subproperty changes are rendered, use `Object.assign()` to rewrite the whole object when any of its subproperties change. + +```js +static get properties(){ + return { + student: Object + }; +} +constructor(){ + super(); + this.student={ id: '1234' name: 'Kazi' }; +} +_render({student}){ + return html` +
+ ${student.id} + ${student.name} +
+ `; +} +changeStudent(){ + // Don't do this: + // this.student.name='Lee'; + + // Do this instead: + this.student = Object.assign({}, this.student, { + name: 'Lee' + }); +} +``` + +## Background: JavaScript objects and arrays + +Changing an object subproperty or array item without reassigning the object itself is known as **mutation**. lit-element observes changes to the object itself, not its subproperties; so when you mutate an array or object, lit-element can't detect the change, and won't re-render the template. + +For this reason, when a subproperty changes, you should implement the change by cloning the object and merging it with its updated subproperties. Use [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) to do this. + +### Use Object.assign to make sure you create true clones + +JavaScript objects are references to locations in memory. If you create a naive copy of a JavaScript object, it will point to the same memory space as the original: + +```js +var thing = { + greeting: 'hello', + entity: 'world' +}; +// naive copy +var thing1 = thing; + +// also a naive copy +var thing2 = new Object(thing); +thing2.greeting='hi'; + +// all 3 point to the same memory space +if(thing===thing1===thing2){ + console.log('literally the same'); + console.log(thing.greeting, thing1.greeting, thing2.greeting); +} +``` + +Arrays are JavaScript `Object`s, and behave the same way: + +```js +var myArray=['some','boring','test','data']; +var otherArray=myArray; +otherArray[1]='nice'; +console.log(myArray[1]); +``` + +If you perform an update by creating a naive copy of an object (for example, with `var newObject = existingObject` or `var newObject = new Object('existingObject')`) instead of a true clone, you won't rewrite the object, and `_render` will not fire. + +## Object.assign + +To clone a new object, use `Object.assign()`: + +```js +var thing = { + greeting: 'hello', + entity: 'world' +}; +var newThing = Object.assign({}, thing); +newThing.greeting='hi'; +console.log(thing.greeting); +``` + +To clone a new array, you can also use `Object.assign()`: + +```js +var myArray=['some','boring','test','data']; +var newArray = Object.assign([], ...myArray); +newArray[1]='nice'; +console.log(myArray[1]); +``` diff --git a/docs/_site/projects/old/clone/custom-element.js b/docs/_site/projects/old/clone/custom-element.js new file mode 100644 index 00000000..88277310 --- /dev/null +++ b/docs/_site/projects/old/clone/custom-element.js @@ -0,0 +1,36 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myArray: Array, + myObject: Object + }; + } + constructor(){ + super(); + this.myArray = ['hello', 'we', 'are', 'test', 'data']; + this.myObject = { + prop1: 'prop 1', + prop2: 'prop 2', + prop3: 'prop 3' + }; + } + _render({myArray, myObject}){ + return html` +
    + ${myArray.map(i => html`
  • ${i}
    • `)} +
+ +
+ myObject.prop1: ${myObject.prop1}
+ myObject.prop2: ${myObject.prop2}
+ myObject.prop3: ${myObject.prop3}
+ + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/old/clone/index.html b/docs/_site/projects/old/clone/index.html new file mode 100644 index 00000000..58154c63 --- /dev/null +++ b/docs/_site/projects/old/clone/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/_site/projects/old/clone/index.js b/docs/_site/projects/old/clone/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/old/clone/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/old/clone/manifest.json b/docs/_site/projects/old/clone/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_site/projects/old/clone/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_site/projects/old/declare/README.md b/docs/_site/projects/old/declare/README.md new file mode 100644 index 00000000..3cb8a571 --- /dev/null +++ b/docs/_site/projects/old/declare/README.md @@ -0,0 +1,36 @@ +To declare custom element properties with lit-element, add a static `properties` getter to your custom element class: + +```js +static get properties(){ + return { + myString: String, + myObject: Object + }; +} +``` + +You can supply any of the properties declared in the static `properties` getter to the element's `_render` function. Use JavaScript expressions to insert property values into an HTML template: + +```js +_render({myString, myObject}){ + return html` +

${myString}

+

myObject.prop1: ${myObject.prop1}

+

myObject.prop2: ${myObject.prop2}

+ `; +} +``` + +
+ +**You must declare a property in the `properties` getter AND supply the property name to `_render` in order to use the property value in template markup.** + +If you forget to supply the property name to `_render`, you may see something like the following error message: + +```text +ReferenceError: myString is not defined at HTMLElement.CustomElement._render +``` + +
+ +lit-element automatically observes all of the properties you declare in the static `properties` getter, and efficiently renders the changes in DOM. diff --git a/docs/_site/projects/old/declare/custom-element.js b/docs/_site/projects/old/declare/custom-element.js new file mode 100644 index 00000000..6b07a2d9 --- /dev/null +++ b/docs/_site/projects/old/declare/custom-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myString: String + }; + } + constructor(){ + super(); + this.myString='initial value'; + } + _render({myString}){ + return html` +

${myString}

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/old/declare/index.html b/docs/_site/projects/old/declare/index.html new file mode 100644 index 00000000..095c86b8 --- /dev/null +++ b/docs/_site/projects/old/declare/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/_site/projects/old/declare/index.js b/docs/_site/projects/old/declare/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/old/declare/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/old/declare/manifest.json b/docs/_site/projects/old/declare/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_site/projects/old/declare/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_site/projects/old/dispatch/README.md b/docs/_site/projects/old/dispatch/README.md new file mode 100644 index 00000000..41d6ffaa --- /dev/null +++ b/docs/_site/projects/old/dispatch/README.md @@ -0,0 +1,39 @@ + +To bind a lit-element property to the attribute of another element: + +```html + +``` + +**custom-element.js** + +```js +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} +``` + +**index.html** + +```html + + +``` diff --git a/docs/_site/projects/old/dispatch/custom-element.js b/docs/_site/projects/old/dispatch/custom-element.js new file mode 100644 index 00000000..163cdbc0 --- /dev/null +++ b/docs/_site/projects/old/dispatch/custom-element.js @@ -0,0 +1,25 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/old/dispatch/index.html b/docs/_site/projects/old/dispatch/index.html new file mode 100644 index 00000000..45459f5e --- /dev/null +++ b/docs/_site/projects/old/dispatch/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + diff --git a/docs/_site/projects/old/dispatch/index.js b/docs/_site/projects/old/dispatch/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/old/dispatch/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/old/dispatch/manifest.json b/docs/_site/projects/old/dispatch/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_site/projects/old/dispatch/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_site/projects/old/initialize/README.md b/docs/_site/projects/old/initialize/README.md new file mode 100644 index 00000000..bd676225 --- /dev/null +++ b/docs/_site/projects/old/initialize/README.md @@ -0,0 +1,128 @@ +You can initialize property values for a lit-element: + +* From the element's constructor +* From markup in an HTML document that imports the element +* From a data binding inside another lit-element +* From a script that accesses the lit-element in DOM + +## Initialize a property from a lit-element constructor + +To initialize a property from a lit-element constructor: + +
my-element.js
+ +```js +constructor(){ + super(); + this.myString='initial value'; + this.myObject= { prop1: 'stuff', prop2: 'blah' } +} +``` + +
+ +**Always initialize object and array properties in the constructor if their subproperties or items are used in an HTML template.** It's fine to initialize objects to the empty object (`{}`), and arrays to the empty array (`[]`); but they must be initialized. For example, if `myObject.prop1` and `anotherObject.myArray[x]` are used in an element template, initialize them as follows: + +```js +static get properties(){ + return { + myObject: Object; + anotherObject: Object; + } +} +constructor(){ + // myObject.prop1 is used in this template, + // so initialize myObject + this.myObject={}; + + // anotherObject.myArray[0-n] are used in this template, + // so initialize anotherObject.myArray + this.anotherObject={ + myArray: [] + }; +} +_render({myObject, anotherObject}){ + return html` +

${myObject.prop1}

+
    + ${anotherObject.myArray.map(i=>`
  • ${i}
    • `)} +
+ `; +} +``` +
+ +## Initialize a property from markup in an HTML document + +To provide a value for an element's declared `String` or `Number` property when the element is used in an HTML document, include the value as a string: + +
index.html
+ +```html + + + + +``` + +To provide a value for an element's declared `Boolean` property when the element is used in an HTML document: + +
index.html
+ +```html + + + + + + + +``` + +
+ +**Only `String`, `Number` and `Boolean` properties can be initialized by supplying strings in HTML.** For performance reasons, lit-element does not support supplying Object or Array property values via strings in HTML markup. See [] for alternatives. + +
+ +## Initialize a property from a data binding in another lit-element template + +From inside another lit-element template, you can provide values to a lit-element with data bindings using JavaScript expressions: + +```js +import {LitElement, html} from '@polymer/lit-element'; +import './my-element.js'; + +class SomeElement extends LitElement { + ... + _render({prop1, prop2}){ + return html` + + `; + } +} +customElement.define('some-element', SomeElement); +``` + +
+ +**Supplying object and array property values with JavaScript expressions is...???** + +```js +import {LitElement, html} from '@polymer/lit-element'; +import './my-element.js'; + +class SomeElement extends LitElement { + /* + * Is this okay? + */ + _render({myObject}){ + return html` + + `; + } +} +customElement.define('some-element', SomeElement); +``` + +
diff --git a/docs/_site/projects/old/initialize/custom-element.js b/docs/_site/projects/old/initialize/custom-element.js new file mode 100644 index 00000000..6b07a2d9 --- /dev/null +++ b/docs/_site/projects/old/initialize/custom-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myString: String + }; + } + constructor(){ + super(); + this.myString='initial value'; + } + _render({myString}){ + return html` +

${myString}

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/old/initialize/index.html b/docs/_site/projects/old/initialize/index.html new file mode 100644 index 00000000..095c86b8 --- /dev/null +++ b/docs/_site/projects/old/initialize/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/_site/projects/old/initialize/index.js b/docs/_site/projects/old/initialize/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/old/initialize/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/old/initialize/manifest.json b/docs/_site/projects/old/initialize/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_site/projects/old/initialize/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_site/projects/old/listeners/README.md b/docs/_site/projects/old/listeners/README.md new file mode 100644 index 00000000..41d6ffaa --- /dev/null +++ b/docs/_site/projects/old/listeners/README.md @@ -0,0 +1,39 @@ + +To bind a lit-element property to the attribute of another element: + +```html + +``` + +**custom-element.js** + +```js +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} +``` + +**index.html** + +```html + + +``` diff --git a/docs/_site/projects/old/listeners/custom-element.js b/docs/_site/projects/old/listeners/custom-element.js new file mode 100644 index 00000000..163cdbc0 --- /dev/null +++ b/docs/_site/projects/old/listeners/custom-element.js @@ -0,0 +1,25 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/old/listeners/index.html b/docs/_site/projects/old/listeners/index.html new file mode 100644 index 00000000..45459f5e --- /dev/null +++ b/docs/_site/projects/old/listeners/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + diff --git a/docs/_site/projects/old/listeners/index.js b/docs/_site/projects/old/listeners/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/old/listeners/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/old/listeners/manifest.json b/docs/_site/projects/old/listeners/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_site/projects/old/listeners/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_site/projects/old/objects/README.md b/docs/_site/projects/old/objects/README.md new file mode 100644 index 00000000..144b867e --- /dev/null +++ b/docs/_site/projects/old/objects/README.md @@ -0,0 +1,92 @@ +For performance reasons, lit-element does not support deserializing object and array properties via attributes in markup. + +Here's how we recommend you initialize array and object properties: + +## Set object properties directly instead of passing them via attributes + +Instead of passing stringified object and array properties via attributes in markup, set object and array properties directly: + +**main-app.js** + +```js +_render({}){ + return html` + + `; +} +_firstRendered(){ + const studentRec = this.shadowDom.querySelector('student-rec'); + studentRec.student={ + id: '12345', + name: 'Yasmeen' + }; +} +``` + +**student-rec.js** + +```js +properties(){ + return { + student: Object + } +} +constructor(){ + super(); + this.student = {}; +} +_render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; +} +``` + +## Use the html helper function with JavaScript expressions to initialize object properties + +You can import and use the `html` helper function to initialize array and object properties. For example: + +**main-app.js** + +```js +_getStudent(){ + return { + id: '12345', + name: 'Yasmeen' + }; +} +_render({}){ + return html` + + `; +} +``` + +**student-rec.js** + +```js +properties(){ + return { + student: Object + } +} +constructor(){ + super(); + this.student = {}; +} +_render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; +} +``` + +## Implement _deserializeValue + +If you need to deserialize properties from a string, [implement the `_deserializeValue` method](https://github.com/Polymer/lit-element/blob/2433ce376521aa8ab5272aa9c12a49ee74ac8c4e/custom_typings/polymer.d.ts#L304). diff --git a/docs/_site/projects/old/objects/index.html b/docs/_site/projects/old/objects/index.html new file mode 100644 index 00000000..7736e292 --- /dev/null +++ b/docs/_site/projects/old/objects/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/_site/projects/old/objects/index.js b/docs/_site/projects/old/objects/index.js new file mode 100644 index 00000000..3ce9fa8f --- /dev/null +++ b/docs/_site/projects/old/objects/index.js @@ -0,0 +1 @@ +import './main-app.js'; diff --git a/docs/_site/projects/old/objects/main-app.js b/docs/_site/projects/old/objects/main-app.js new file mode 100644 index 00000000..88ab3929 --- /dev/null +++ b/docs/_site/projects/old/objects/main-app.js @@ -0,0 +1,19 @@ +import { LitElement, html } from '@polymer/lit-element'; +import './student-rec.js'; + +class MainApp extends LitElement { + _render({}){ + return html` + + `; + } + _firstRendered(){ + const studentRec = this.shadowRoot.querySelector('student-rec'); + studentRec.student={ + id: '12345', + name: 'Yasmeen' + }; + } +} + +customElements.define('main-app', MainApp); diff --git a/docs/_site/projects/old/objects/manifest.json b/docs/_site/projects/old/objects/manifest.json new file mode 100644 index 00000000..41800609 --- /dev/null +++ b/docs/_site/projects/old/objects/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "main-app.js", + "student-rec.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_site/projects/old/objects/student-rec.js b/docs/_site/projects/old/objects/student-rec.js new file mode 100644 index 00000000..09aea9d5 --- /dev/null +++ b/docs/_site/projects/old/objects/student-rec.js @@ -0,0 +1,23 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class StudentRec extends LitElement { + static get properties(){ + return { + student: Object + } + } + constructor(){ + super(); + this.student = {}; + } + _render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; + } +} + +customElements.define('student-rec', StudentRec); diff --git a/docs/_site/projects/old/share/README.md b/docs/_site/projects/old/share/README.md new file mode 100644 index 00000000..714edde7 --- /dev/null +++ b/docs/_site/projects/old/share/README.md @@ -0,0 +1,13 @@ +This page is about sharing data upwards (from child to parent elements). For info about binding data downwards (from a parent element to a child element), see [data binding](/data/bind). + +lit-element doesn't support two-way data binding. To get the same effect, you have a few options. + +## Props down, events up + +For downwards data flow, use property bindings. + +For upwards data flow, use events. + +## State management + + diff --git a/docs/_site/projects/old/share/child-1.js b/docs/_site/projects/old/share/child-1.js new file mode 100644 index 00000000..933b9959 --- /dev/null +++ b/docs/_site/projects/old/share/child-1.js @@ -0,0 +1,29 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class Child1 extends LitElement { + static get properties(){ + return { + stuff: String + }; + } + constructor(){ + super(); + this.stuff=''; + } + _render({stuff}){ + return html` +

${stuff}

+ + `; + } + +} + +customElements.define('child-1', Child1); diff --git a/docs/_site/projects/old/share/child-2.js b/docs/_site/projects/old/share/child-2.js new file mode 100644 index 00000000..4a4844b9 --- /dev/null +++ b/docs/_site/projects/old/share/child-2.js @@ -0,0 +1,29 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class Child2 extends LitElement { + static get properties(){ + return { + stuff: String + }; + } + constructor(){ + super(); + this.stuff=''; + } + _render({stuff}){ + return html` +

${stuff}

+ + `; + } + +} + +customElements.define('child-2', Child2); diff --git a/docs/_site/projects/old/share/index.html b/docs/_site/projects/old/share/index.html new file mode 100644 index 00000000..665bd2bb --- /dev/null +++ b/docs/_site/projects/old/share/index.html @@ -0,0 +1,18 @@ + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/_site/projects/old/share/index.js b/docs/_site/projects/old/share/index.js new file mode 100644 index 00000000..d9e1b247 --- /dev/null +++ b/docs/_site/projects/old/share/index.js @@ -0,0 +1 @@ +import './parent-element.js'; diff --git a/docs/_site/projects/old/share/manifest.json b/docs/_site/projects/old/share/manifest.json new file mode 100644 index 00000000..dc0236c3 --- /dev/null +++ b/docs/_site/projects/old/share/manifest.json @@ -0,0 +1,16 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "parent-element.js", + "child-1.js", + "child-2.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_site/projects/old/share/parent-element.js b/docs/_site/projects/old/share/parent-element.js new file mode 100644 index 00000000..b463f0bf --- /dev/null +++ b/docs/_site/projects/old/share/parent-element.js @@ -0,0 +1,41 @@ +import { LitElement, html } from '@polymer/lit-element'; +import './child-1.js'; +import './child-2.js'; + +class ParentElement extends LitElement { + static get properties(){ + return { + data: Object + }; + } + constructor(){ + super(); + this.data = { + prop1: 'stuff', + prop2: 'more stuff' + } + } + _render({data}){ + return html` +

parent-element

+

data.prop1: ${data.prop1}

+

data.prop2: ${data.prop2}

+

child-1

+ + +

child-2

+ + + `; + } +} + +customElements.define('parent-element', ParentElement); diff --git a/docs/_site/projects/try/create/README.md b/docs/_site/projects/try/create/README.md new file mode 100644 index 00000000..932a89e2 --- /dev/null +++ b/docs/_site/projects/try/create/README.md @@ -0,0 +1,3 @@ +## lit-element docs + +This is a code sample for the lit-element docs. diff --git a/docs/_site/projects/try/create/custom-element.js b/docs/_site/projects/try/create/custom-element.js new file mode 100644 index 00000000..cac6a6c6 --- /dev/null +++ b/docs/_site/projects/try/create/custom-element.js @@ -0,0 +1,14 @@ +// Import and extend the LitElement base class. +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + // Return your template from lit-element's `render` function. + render(){ + return html` + +

hello world from custom-element

+ `; + } +} +// Register the new element with the browser. +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/try/create/index.html b/docs/_site/projects/try/create/index.html new file mode 100644 index 00000000..814d63a2 --- /dev/null +++ b/docs/_site/projects/try/create/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_site/projects/try/create/index.ts b/docs/_site/projects/try/create/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/try/create/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/try/create/manifest.json b/docs/_site/projects/try/create/manifest.json new file mode 100644 index 00000000..bce55e53 --- /dev/null +++ b/docs/_site/projects/try/create/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "custom-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" + } +} diff --git a/docs/_site/projects/try/events/README.md b/docs/_site/projects/try/events/README.md new file mode 100644 index 00000000..23e0c9e2 --- /dev/null +++ b/docs/_site/projects/try/events/README.md @@ -0,0 +1,14 @@ +## Add event listeners in plain HTML + +Use JavaScript expressions to add event listeners in plain HTML: + +```js +render(){ + return html` + + `; +} +clickHander(event){ + console.log(event.detail); +} +``` diff --git a/docs/_site/projects/try/events/custom-element.js b/docs/_site/projects/try/events/custom-element.js new file mode 100644 index 00000000..c10a5737 --- /dev/null +++ b/docs/_site/projects/try/events/custom-element.js @@ -0,0 +1,15 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + render(){ + return html` +

check the console

+ + `; + } + clickHandler(event){ + console.log(event.target.id + ' was clicked.'); + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/try/events/index.html b/docs/_site/projects/try/events/index.html new file mode 100644 index 00000000..79284648 --- /dev/null +++ b/docs/_site/projects/try/events/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_site/projects/try/events/index.ts b/docs/_site/projects/try/events/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/try/events/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/try/events/manifest.json b/docs/_site/projects/try/events/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/_site/projects/try/events/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_site/projects/try/expressions/README.md b/docs/_site/projects/try/expressions/README.md new file mode 100644 index 00000000..36a075b5 --- /dev/null +++ b/docs/_site/projects/try/expressions/README.md @@ -0,0 +1,16 @@ +## Use simple JavaScript expressions for loops and conditionals + +Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: + +```js +render(){ + return html` +
    + ${myArray.map(i => html`
  • ${i}
    • `)} +
+ ${myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; +} +``` diff --git a/docs/_site/projects/try/expressions/custom-element.js b/docs/_site/projects/try/expressions/custom-element.js new file mode 100644 index 00000000..a5a6b9ce --- /dev/null +++ b/docs/_site/projects/try/expressions/custom-element.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + render(){ + return html` +
    + ${this.myArray.map(i => html`
  • ${i}
    • `)} +
+ ${this.myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/try/expressions/index.html b/docs/_site/projects/try/expressions/index.html new file mode 100644 index 00000000..eacfc6bb --- /dev/null +++ b/docs/_site/projects/try/expressions/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_site/projects/try/expressions/index.ts b/docs/_site/projects/try/expressions/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/try/expressions/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/try/expressions/manifest.json b/docs/_site/projects/try/expressions/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/_site/projects/try/expressions/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_site/projects/try/properties/README.md b/docs/_site/projects/try/properties/README.md new file mode 100644 index 00000000..932a89e2 --- /dev/null +++ b/docs/_site/projects/try/properties/README.md @@ -0,0 +1,3 @@ +## lit-element docs + +This is a code sample for the lit-element docs. diff --git a/docs/_site/projects/try/properties/custom-element.js b/docs/_site/projects/try/properties/custom-element.js new file mode 100644 index 00000000..de47c3e0 --- /dev/null +++ b/docs/_site/projects/try/properties/custom-element.js @@ -0,0 +1,25 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + // Declare properties. + static get properties(){ + return { + headingtext: { type: String } + }; + } + constructor(){ + // Always call superconstructor when you override the constructor. + super(); + + // You can initialize properties in the element constructor. + this.headingtext='Hello World!'; + } + render(){ + return html` + +

${this.headingtext}

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/try/properties/index.html b/docs/_site/projects/try/properties/index.html new file mode 100644 index 00000000..4fbc7716 --- /dev/null +++ b/docs/_site/projects/try/properties/index.html @@ -0,0 +1,16 @@ + + + + + + + + + lit-element code sample + + + + + + + diff --git a/docs/_site/projects/try/properties/index.ts b/docs/_site/projects/try/properties/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/try/properties/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/try/properties/manifest.json b/docs/_site/projects/try/properties/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/_site/projects/try/properties/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_site/projects/try/style/README.md b/docs/_site/projects/try/style/README.md new file mode 100644 index 00000000..932a89e2 --- /dev/null +++ b/docs/_site/projects/try/style/README.md @@ -0,0 +1,3 @@ +## lit-element docs + +This is a code sample for the lit-element docs. diff --git a/docs/_site/projects/try/style/custom-element.js b/docs/_site/projects/try/style/custom-element.js new file mode 100644 index 00000000..2b7d187f --- /dev/null +++ b/docs/_site/projects/try/style/custom-element.js @@ -0,0 +1,13 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + render(){ + return html` + +

hello world from custom-element

+ `; + } +} +customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/try/style/index.html b/docs/_site/projects/try/style/index.html new file mode 100644 index 00000000..7377576f --- /dev/null +++ b/docs/_site/projects/try/style/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + +

A paragraph in the main document

+ diff --git a/docs/_site/projects/try/style/index.ts b/docs/_site/projects/try/style/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_site/projects/try/style/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_site/projects/try/style/manifest.json b/docs/_site/projects/try/style/manifest.json new file mode 100644 index 00000000..7ee1f9ca --- /dev/null +++ b/docs/_site/projects/try/style/manifest.json @@ -0,0 +1,15 @@ +{ + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_site/styleguide.html b/docs/_site/styleguide.html new file mode 100644 index 00000000..28ccfe4b --- /dev/null +++ b/docs/_site/styleguide.html @@ -0,0 +1,176 @@ + + + lit-element style guide – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + + +

lit-element style guide

+ +
+ + + + + +
Possible Outline
+
+  Code
+
+    Typescript
+    Identifiers
+
+  Project structure
+
+    Choose filename
+    Manage dependencies
+
+  Private/public/protected etc
+
+  Elements
+
+    Design an element    
+    Name an element
+    Define and register an element
+
+  Data
+    Declare a property
+    Name a property
+    Bind properties to data 
+      Attributes
+      Boolean attributes
+      Properties
+      Values 
+    Deserialize attributes
+      Deserialize string attributes 
+      Deserialize number attributes
+      Deserialize object and array attributes
+
+  Methods
+    Implement lit-element methods
+    Implement your own methods
+
+  Events
+    Name custom events 
+    Name and write event handlers 
+    Click vs tap
+
+  Reusable code 
+    Name and write class mixins
+    Apply class mixins   
+    Name and write shareable behaviors
+    Apply shareable behaviors
+
+ + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/tools/index.html b/docs/_site/tools/index.html new file mode 100644 index 00000000..f6edb57b --- /dev/null +++ b/docs/_site/tools/index.html @@ -0,0 +1,203 @@ + + + Tools – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + Develop and deploy + + + +
+ + + + + +

Tools

+ +
+ + + + + +

See Set up locally for detailed installation instructions.

+ + + +
+ +

+ +

Quick setup

+ +

See Set up locally for detailed installation instructions. Here’s the quick version:

+ +
    +
  1. +

    Install pre-requisites (Git, Node.js and npm, and Polymer CLI).

    +
    2. +
  2. +

    Update to the latest versions of npm and Polymer CLI:

    + + 
    npm install -g npm@latest
+npm install -g polymer-cli@latest
+
    +
    3. +
  3. +

    Add lit-element to an existing npm project:

    + + 
    npm install --save @polymer/lit-element
+
    +
    4. +
+ +
+ +

+ +

Development tools

+ +
Polymer CLI (`polymer serve`)
+Text editor 
+  HTML syntax highlighting inside JavaScript template literals
+Debugging tools
+
+ +
+ +

+ +

Build and deployment tools

+ +
Polymer CLI
+  polymer.json config
+WebPack
+Rollup
+Firebase
+
+ + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/tools/setup.html b/docs/_site/tools/setup.html new file mode 100644 index 00000000..1f7c229b --- /dev/null +++ b/docs/_site/tools/setup.html @@ -0,0 +1,242 @@ + + + Set up lit-element locally – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + Develop and deploy + + + +
+ + + + + +

Set up lit-element locally

+ +
+ + + + + + + +
+ +

+ +

Install pre-requisites

+ +

To work locally with lit-element, you’ll first need to install Git, npm and Node.js, and the Polymer CLI.

+ +
    +
  1. +

    Install Git.

    +
    2. +
  2. +

    Install npm and Node.js.

    +
    3. +
  3. +

    Update npm:

    + + 
    npm install -g npm@latest
+
    +
    4. +
  4. +

    Install Polymer CLI:

    + + 
    npm install -g polymer-cli@latest
+
    +
    5. +
+ +
+ +

+ +

Serve a sample project

+ +
    +
  1. +

    Use Git to copy a sample lit-element project:

    + + 
    git clone https://github.com/polymerlabs/start-lit.git
+
    +
    2. +
  2. +

    Go to the start-lit folder:

    + + 
    cd start-lit
+
    +
    3. +
  3. +

    Install the project’s dependencies:

    + + 
    npm install
+
    +
    4. +
  4. +

    Serve the project locally:

    + + 
    polymer serve
+
    +
    5. +
+ +
+ +

+ +

Build the sample project

+ +

lit-element code needs a few changes for web browsers to load it. During developent, the Polymer CLI development server (polymer serve) handles this for you.

+ +

To deploy a lit-element project to the web, you need to build it. Configure build options in polymer.json, then run polymer build.

+ +

We’ve included a sample polymer.json file in the start-lit project to get you up and running.

+ +

See the Polymr CLI documentation for instructions on configuring your build.

+ +

To build the start-lit sample project:

+ +
    +
  1. +

    Go to your root project folder:

    + + 
    cd start-lit
+
    +
    2. +
  2. +

    Use Polymer CLI to build your project:

    + + 
    polymer build    
+
    +
    3. +
+ + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/try/create.html b/docs/_site/try/create.html new file mode 100644 index 00000000..5da15f75 --- /dev/null +++ b/docs/_site/try/create.html @@ -0,0 +1,214 @@ + + + Create your first custom element – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + Try lit-element + + + +
+ + + + + +

Create your first custom element

+ +
+ + + + + +

To create a new custom element with lit-element:

+ +
    +
  • Import and extend the LitElement base class.
    • +
  • Define your element template inside lit-element’s render function.
    • +
  • Register the new element with the browser.
    • +
+ +

You can now import your element as a JavaScript module, and use it in markup.

+ +

custom-element.js

+ +
// Import and extend the LitElement base class.
+import { LitElement, html } from '@polymer/lit-element'; 
+
+class CustomElement extends LitElement {
+  // Return your template from lit-element's `render` function.
+  render(){
+    return html`
+      <!-- Write your element template in plain HTML. -->
+      <p>hello world from custom-element</p>
+    `;
+  }
+}
+// Register the new element with the browser.
+customElements.define('custom-element', CustomElement);
+
+
+ +

index.html

+ +
<!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>
+    <custom-element></custom-element>
+  </body>
+</html>
+
+
+ + + + + + + +
+ + + + + + Add a property value to your template >> + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/try/events.html b/docs/_site/try/events.html new file mode 100644 index 00000000..2a99f1e4 --- /dev/null +++ b/docs/_site/try/events.html @@ -0,0 +1,213 @@ + + + Use event handlers in templates – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + Try lit-element + + + +
+ + + + + +

Use event handlers in templates

+ +
+ + + + + +

Use lit-html’s @event notation to add an event handler to an element inside a template. For example:

+ +

Print click events for a button to the console:

+ +
render(){
+  return html`
+    <button @click="${(e) => console.log(e)}">click me</button>
+  `;
+}
+
+ +

Send click events for a button to a method on your element:

+ +
doStuff(e){
+  console.log(e);
+  console.log(e.detail);
+  console.log(e.target.id);
+}
+render(){
+  return html`
+    <button @click="${(e) => this.doStuff(e)}">click me</button>
+  `;
+}
+
+ +

custom-element.js

+
import { LitElement, html } from '@polymer/lit-element';
+
+class CustomElement extends LitElement {  
+  render(){
+    return html`
+      <p>check the console</p>
+      <button 
+        id="mybutton" 
+        @click="${(event) => this.clickHandler(event)}">click</button>
+    `;
+  }
+  clickHandler(event){
+    console.log(event.target.id + ' was clicked.');
+  }
+}
+
+customElements.define('custom-element', CustomElement);
+
+ + + + + + + +
+ + + << Write loops and conditionals + + + + + Style >> + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/try/expressions.html b/docs/_site/try/expressions.html new file mode 100644 index 00000000..ae1bab37 --- /dev/null +++ b/docs/_site/try/expressions.html @@ -0,0 +1,182 @@ + + + Write loops and conditionals with simple JavaScript expressions – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + Try lit-element + + + +
+ + + + + +

Write loops and conditionals with simple JavaScript expressions

+ +
+ + + + + +

Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions:

+ +
render(){
+  return html`
+    <ul>
+      ${this.myArray.map(i => html`<li>${i}</li>`)}
+    </ul>
+    ${this.myBool?
+      html`<p>Render some HTML if myBool is true</p>`:
+      html`<p>Render some other HTML if myBool is false</p>`}
+  `;
+}
+
+ + + + + + + +
+ + + << Use properties + + + + + Use event handlers >> + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/try/index.html b/docs/_site/try/index.html new file mode 100644 index 00000000..406a5ce4 --- /dev/null +++ b/docs/_site/try/index.html @@ -0,0 +1,170 @@ + + + Try lit-element – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + + +

Try lit-element

+ +
+ + + + + +

Build your first web component and use it in a web page.

+ +

Try lit-element in live code samples without installing anything:

+ + + +

If you’re ready to dive in, Set up lit-element locally to get started with your own development environment.

+ + +
+ + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/try/properties.html b/docs/_site/try/properties.html new file mode 100644 index 00000000..13b4e04f --- /dev/null +++ b/docs/_site/try/properties.html @@ -0,0 +1,202 @@ + + + Use properties in templates – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + Try lit-element + + + +
+ + + + + +

Use properties in templates

+ +
+ + + + + +

To render property values in your element templates:

+ +
    +
  • Declare your properties, for example, in a static getter.
    • +
  • Add properties to your template with JavaScript expressions.
    • +
  • You can initialize properties in the element constructor.
    • +
+ +

custom-element.js

+
class CustomElement extends LitElement {  
+  // Declare properties.
+  static get properties(){
+    return {
+      headingtext: { type: String }
+    };
+  }
+  constructor(){
+    // Always call superconstructor when you override the constructor.
+    super();
+
+    // You can initialize properties in the element constructor.
+    this.headingtext='Hello World!';
+  }
+  render(){
+    return html`
+      <!-- Add properties to a template with JavaScript expressions. -->
+      <h1>${this.headingtext}</h1>
+    `;
+  }
+}
+
+ +

lit-element automatically observes and renders property changes.

+ + + + + + + +
+ + + << Create an element + + + + + Write loops and conditionals >> + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/try/style.html b/docs/_site/try/style.html new file mode 100644 index 00000000..ddda8755 --- /dev/null +++ b/docs/_site/try/style.html @@ -0,0 +1,195 @@ + + + Style an element template – lit-element docs + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + Try lit-element + + + +
+ + + + + +

Style an element template

+ +
+ + + + + +

Style an element by including a style block in its template:

+ +

custom-element.js

+ +
render(){
+  return html`
+    <style>
+      p { color: blue }
+    </style>
+    <p>hello world from custom-element</p>
+  `;
+}
+
+ +

Styles inside custom element templates are encapsulated. These styles will only affect elements inside the template-not the main document.

+ +

index.html

+ +
<html>
+  <head>
+    <script type="module" src="./custom-element.js"></script>
+  </head>
+  <body>
+    <custom-element></custom-element>  
+    <p>A paragraph in the main document</p>      
+  </body>
+</html>
+
+ + + + + + + +
+ + + << Use event handlers + + + + + +
+ + + +
+ +
+ + + + + + + diff --git a/docs/_site/try/use.md b/docs/_site/try/use.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/css/main.css b/docs/css/main.css new file mode 100644 index 00000000..0fc6d85f --- /dev/null +++ b/docs/css/main.css @@ -0,0 +1,473 @@ +html { + font-family: 'Roboto', 'Noto', sans-serif; + color: #333333; + font-size: 16px; +} + +body { + min-height: 101vh; + margin: 0; + color: #333333; + background-color: #FFF; + line-height: 1.5; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + text-rendering: optimizeLegibility; +} + +.breadcrumbs { + letter-spacing: 0.03em; +} + +hr { + border: 0; + height: 0; + border-top: 1px solid #dadce0; +} + +h1 { + margin-top: 16px; + margin-bottom: 16px; + font-weight: 400; + font-size: 24px; + letter-spacing: 0.03em; + color: #333333; +} +h2 { + margin-top: 16px; + margin-bottom: 16px; + font-weight: 500; + font-size: 20px; + letter-spacing: 0.03em; + color: #333333; +} +h3 { + margin-top: 32px; + margin-bottom: 16px; + font-weight: 400; + font-size: 18px; + letter-spacing: 0.03em; + color: #333333; +} + +a { + text-decoration: none; + color: inherit; +} + +.flex { + flex: 1; +} + +/* top nav */ +.main-nav { + position: relative; + display: flex; + align-items: center; + padding: 0 48px; + box-sizing: border-box; + font-size: 16px; + letter-spacing: 1px; + border-bottom: 1px solid #EEEBF3; + background: #333333; + color: white; +} + +.main-nav > ul { + list-style-type: none; + padding: 0; +} + +.main-nav > ul > li { + display: inline-block; + padding: 8px 0; + margin: 0 12px; +} + +.main-nav > ul > li:hover { + color: #FADE4B; +} + +#searchBox { + display: inline-block; + width: 200px; + background: white; + border: none; + font-family: inherit; + font-size: inherit; + color: black; + margin: 0 10px; + border-bottom: 1px solid 333333; + -webkit-appearance: textfield; +} + +#searchBox::-webkit-search-decoration { + -webkit-appearance: none; +} + +section { + padding: 60px 24px; + text-align: center; +} + +.devices { + display: block; + height: 460px; + background-image: url(https://user-images.githubusercontent.com/1369170/39715580-a1be5126-51e2-11e8-8440-96b07be03a3c.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center center; +} + +.main { + display: flex; + flex-direction: column; + align-items: center; + background-color: #FFF; +} + +.main-item { + display: flex; + max-width: 700px; + padding: 16px 0; + text-align: left; +} + +.main-item > img { + width: auto; + height: 100px; + padding-right: 32px; +} + +.compatibility { + background-color: #F2F2F2; +} + +.browsers > img { + width: 70px; + height: 70px; + padding: 20px; +} + +footer { + display: flex; + align-items: center; + justify-content: center; + padding: 0 14px; + background: #F2F3F4; + color: 333333; + border-top: 1px solid #dadce0; +} + +footer ul { + padding: 0; +} + +footer ul li { + display: inline-block; +} + +footer ul li::before { + padding: 0 14px; + content: '/'; + color: #333333; +} +footer a { + color: #333333; + font-size: 14px; +} + +/* doc page */ +.toc { + /* position: sticky works in Chrome, Firefox, Safari and Edge; + fallback to position: static for which the nav will just be part + of the scrolling content. */ + position: -webkit-sticky; + position: sticky; + top: 0; + left: 0; + width: 340px; + height: 300px; + box-sizing: border-box; + padding: 24px; +} + +.toc a:hover { + border-bottom: 2px solid #FADE4B; + -webkit-transition: -webkit-transform .3s ease; + -webkit-transition: transform .3s ease; + transition: transform .3s ease; +} + +.toc { + list-style-type: none; +} +.toc ul { + padding: 0 0 0 16px; +} + +.toc ul ul { + padding: 8px 0 0 40px; +} + +.toc li { + padding: 6px 0; + list-style-type: none; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + -webkit-transition: -webkit-transform .3s ease; + -webkit-transition: transform .3s ease; + transition: transform .3s ease; +} + +.toc > ul > li { + font-weight: bold; +} +.toc svg { + width: 24px; + height: 24px; + fill: currentcolor; + vertical-align: middle; +} +.toc span { + display: inline-block; + vertical-align: sub; + padding: 0 10px; +} + +.current { + font-weight: bold; +} + + + +article { + max-width: 860px; + padding: 40px; + margin: -300px 0 0 340px; + border-left: 1px solid #dadce0; + min-height: 70vh; +} + +article a { + color: #1e88e5; +} + +article h1 a { + color: #333333; +} + +article h2 a { + color: #333333; +} + +article a:hover { + text-decoration: underline; +} + +article img { + max-width: 100%; + box-sizing: border-box; + box-shadow: 0 1px 4px 0 333333; + margin: 20px auto; + display: block; +} + +article .bottomnav { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.inline img { + display: inline-block; + margin: 0; + vertical-align: middle; +} + +p.caption, b { + font-weight: 500; +} + +/* table of contents. align the first set of bullets with the title. */ +#table-of-contents + ul { + list-style-type: none; + padding: 0; +} +code, pre { + font-family: 'Roboto Mono', Consolas, monospace !important; +} + +code { + background: #F4F4F6; + color: 333333; + font-size: inherit; + padding: 2px 4px; + white-space: nowrap; +} + +pre code { + word-break: break-all; + padding: 0; + white-space: pre; +} +pre { + white-space: pre; + word-wrap: normal; + font-size: 14px; + padding: 24px; + background: #F4F4F6; + overflow-x: auto; +} + +table { + border-collapse: collapse; +} + +thead { + text-align: left; + background-color: #F9F8FB; + font-weight: 600; +} + +tr { + border-bottom: 1px solid #dadce0; +} + +th, td { + padding: 15px 20px; +} + +/* small screen */ +@media (max-width: 767px) { + /* home page */ + section { + padding: 24px; + } + + .devices { + height: 200px; + } + + .hero-buttons { + display: flex; + flex-direction: column; + align-items: center; + } + + .hero-buttons > * { + width: 240px; + margin: 8px 0; + } + + .features { + display: block; + } + + .feature { + display: block; + width: auto; + padding: 16px 0; + } + + .feature > .icon { + width: 48px; + height: 48px; + } + + .feature > p { + margin: 4px 0; + } + + .main { + display: block; + } + + .main-item { + display: block; + padding: 16px 0; + text-align: center; + } + + .main-item > img { + width: 48px; + height: auto; + padding: 0 0 4px 0; + } + + .main-item p { + margin: 4px 0; + } + + .browsers > img { + width: 40px; + height: 40px; + padding: 4px; + } + + /* doc page */ + .toc { + position: static; + width: auto; + height: auto; + padding: 16px 24px; + } + + article { + padding: 0 24px; + margin-top: 0; + margin-left: 0; + } + + .toc ul { + margin: 0; + padding: 0; + } + + footer { + flex-direction: column; + align-items: start; + } + footer ul { + margin: 0; + padding: 0; + } + + footer ul li::before { + display: none; + } + + footer ul li::after { + padding: 0 14px; + content: '/'; + color: 333333; + } + + .main-nav { + padding: 0 24px; + } +} + +@media (max-width: 575px) { + /* top nav */ + .main-nav { + flex-direction: column; + padding-top: 14px; + } + + .main-nav > ul { + display: flex; + width: 100%; + justify-content: space-between; + } + + .main-nav > ul > li { + margin: 0 4px; + } +} + +@media (max-width: 360px) { + .main-nav > ul > li { + font-size: 13px; + } +} diff --git a/docs/css/pygments.css b/docs/css/pygments.css new file mode 100644 index 00000000..b7f49be9 --- /dev/null +++ b/docs/css/pygments.css @@ -0,0 +1,61 @@ +.highlight .hll { background-color: #ffffcc } +.highlight .c { color: #0099FF; font-style: italic } /* Comment */ +.xhighlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */ +.highlight .k { color: #006699; font-weight: bold } /* Keyword */ +.highlight .o { color: #555555 } /* Operator */ +.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #009999 } /* Comment.Preproc */ +.highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #FF0000 } /* Generic.Error */ +.highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */ +.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ +.highlight .go { color: #AAAAAA } /* Generic.Output */ +.highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */ +.highlight .gt { color: #99CC66 } /* Generic.Traceback */ +.highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */ +.highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */ +.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { color: #006699 } /* Keyword.Pseudo */ +.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #FF6600 } /* Literal.Number */ +.highlight .s { color: #CC3300 } /* Literal.String */ +.highlight .na { color: #330099 } /* Name.Attribute */ +.highlight .nb { color: #336666 } /* Name.Builtin */ +.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */ +.highlight .no { color: #336600 } /* Name.Constant */ +.highlight .nd { color: #9999FF } /* Name.Decorator */ +.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */ +.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #CC00FF } /* Name.Function */ +.highlight .nl { color: #9999FF } /* Name.Label */ +.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */ +.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */ +.highlight .nv { color: #003333 } /* Name.Variable */ +.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #FF6600 } /* Literal.Number.Float */ +.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */ +.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */ +.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */ +.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */ +.highlight .sc { color: #CC3300 } /* Literal.String.Char */ +.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ +.highlight .s2 { color: #CC3300 } /* Literal.String.Double */ +.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */ +.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */ +.highlight .si { color: #AA0000 } /* Literal.String.Interpol */ +.highlight .sx { color: #CC3300 } /* Literal.String.Other */ +.highlight .sr { color: #33AAAA } /* Literal.String.Regex */ +.highlight .s1 { color: #CC3300 } /* Literal.String.Single */ +.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */ +.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #003333 } /* Name.Variable.Class */ +.highlight .vg { color: #003333 } /* Name.Variable.Global */ +.highlight .vi { color: #003333 } /* Name.Variable.Instance */ +.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */ diff --git a/docs/docs/create/design.md b/docs/docs/create/design.md new file mode 100644 index 00000000..a186420e --- /dev/null +++ b/docs/docs/create/design.md @@ -0,0 +1,10 @@ +--- +layout: post +title: Designing web components +parent: /docs/ +type: concept +topic: /docs/create +permalink: /docs/create/design +--- + +TODO: Draft this page diff --git a/docs/docs/create/index.md b/docs/docs/create/index.md new file mode 100644 index 00000000..9e93390a --- /dev/null +++ b/docs/docs/create/index.md @@ -0,0 +1,37 @@ +--- +layout: post +title: Create an element +parent: /docs/ +type: task +topic: /docs/create +permalink: /docs/create/index +--- + +To add LitElement to your project: + +``` +npm install @polymer/lit-element --save +``` + +To create a new element: + +* Import the `LitElement` base class and the `html` helper function. +* Extend the `LitElement` base class. +* Implement `render` to define a template for your element. +* Register the new element with the browser. + +### Example + +_my-element.js_ + +```js +{% include projects/docs/create/my-element.js %} +``` + +_index.html_ + +```html +{% include projects/docs/create/index.html %} +``` + +{% include project.html folder="docs/create" openFile="my-element.js" forceEmbedLayout="true" view="editor" %} diff --git a/docs/docs/create/renderroot.md b/docs/docs/create/renderroot.md new file mode 100644 index 00000000..e8d69756 --- /dev/null +++ b/docs/docs/create/renderroot.md @@ -0,0 +1,60 @@ +--- +layout: post +title: Define an element's render root +parent: /docs/ +type: task +topic: /docs/create +permalink: /docs/create/renderroot +--- + + + +### About the render root + +The render root is the node into which an element's template is rendered. By default, LitElement creates an open `shadowRoot` and renders an element's children inside it, producing a DOM structure looking something like this: + +```text + + #shadow-root +

child 1

+

child 2

+``` + +You can customize the render root by implementing `createRenderRoot`. + + + +### Customize the render root + +To customize the render root, implement `createRenderRoot` and return an element into which to render the template. + +For example, to render into the element's light DOM, return `this`: + +```js +class LightDom extends LitElement { + render(){ + return html` +

Render root overridden. Template renders in light DOM.

+ `; + } + createRenderRoot(){ + return this; + } +} +``` + +### Example + +_default-root.js_ + +```js +{% include projects/docs/renderroot/default-root.js %} +``` + +_light_dom.js_ + +```js +{% include projects/docs/renderroot/light-dom.js %} +``` + +{% include project.html folder="docs/renderroot" openFile="index.html" forceEmbedLayout="true" view="editor" %} diff --git a/docs/docs/create/typescript.md b/docs/docs/create/typescript.md new file mode 100644 index 00000000..6dba1f0f --- /dev/null +++ b/docs/docs/create/typescript.md @@ -0,0 +1,11 @@ +--- +layout: post +title: Use typescript decorators to create an element class +parent: /docs/ +type: task +topic: /docs/create +permalink: /docs/create/typescript +--- + +TODO: Draft this page + diff --git a/docs/docs/import.md b/docs/docs/import.md new file mode 100644 index 00000000..f2cbab7e --- /dev/null +++ b/docs/docs/import.md @@ -0,0 +1,89 @@ +--- +layout: post +title: Import an existing element +parent: /docs/ +type: task +--- + +Import and use a LitElement-based element in an HTML document or another element. + +**On this page:** + +* [Import and use a third-party element](#thirdparty) +* [Import and use your own element](#own) + + + +### Import and use a third-party element + +To work with an existing LitElement-based element made by a third party, refer to the third party documentation for instructions on how to install the element and use it in your project. + +Many elements are published on npm and can be installed from the command line: + +```bash +cd my-project-folder +npm install package-name --save +``` + +In an HTML document, an element published on npm can be imported from the `node_modules` folder: + +```html + + + + + + +``` + +To import an existing element and use it in your own LitElement-based project: + +```js +import 'package-name/existing-element.js'; + +class MyElement extends LitElement{ + render(){ + return html` + + `; + } +} +customElements.define('existing-element', MyElement); +``` + +
+ +**Package names must be transformed into URLs for a browser to load them.** If you're working with Polymer CLI, `polymer serve` and `polymer build` take care of this for you. See the [Develop and deploy](/tools/) documentation for more info. + +
+ + + +### Import and use your own element + +In an HTML document: + +```html + + + + + + +``` + +In another LitElement-based element: + +```js +// Use relative paths for peer dependencies +import './my-element.js'; + +class MyOtherElement extends LitElement{ + render(){ + return html` + + `; + } +} +customElements.define('my-other-element', MyOtherElement); +``` diff --git a/docs/docs/index.md b/docs/docs/index.md new file mode 100644 index 00000000..d224ba3c --- /dev/null +++ b/docs/docs/index.md @@ -0,0 +1,7 @@ +--- +layout: post +title: API Documentation +type: contents +--- + +TODO: Draft this page diff --git a/docs/docs/templates/annotations.md b/docs/docs/templates/annotations.md new file mode 100644 index 00000000..546ba35c --- /dev/null +++ b/docs/docs/templates/annotations.md @@ -0,0 +1,54 @@ +--- +layout: post +title: Bind data to a child element in a template +parent: /docs/ +type: task +topic: /docs/templates +permalink: /docs/templates/annotations +--- + +Use lit-element annotations with JavaScript expressions to bind data from an element's properties to a child element in its template. + +Bind to a child element's: + +* Text node: + + ```js + html`
${this.prop1}
` + ``` + +* Attribute: + + ```js + html`
` + ``` + +* Boolean attribute: + + ```js + html`this should be hidden` + ``` + +* Property: + + ```js + html`` + ``` + +* Event handler: + + ```js + html`` + ``` + +### Example + +_custom-element.js_ + +```js +{% include projects/docs/annotations/custom-element.js %} +``` + +{% include project.html folder="docs/annotations" openFile="custom-element.js" %} + +To share data from child elements to parent elements, use events. See [...]() for more information. diff --git a/docs/docs/templates/compose.md b/docs/docs/templates/compose.md new file mode 100644 index 00000000..2a8d1294 --- /dev/null +++ b/docs/docs/templates/compose.md @@ -0,0 +1,61 @@ +--- +layout: post +title: Compose and nest lit-element templates +parent: /docs/ +type: task +topic: /docs/templates +permalink: /docs/templates/compose +--- + +You can compose LitElement templates from other LitElement templates: + +```js +class MyApp extends LitElement { + render(){ + return html` + ${this.headerTemplate()} + ${this.navTemplate()} + ${this.footerTemplate()} + `; + } + static get headerTemplate(){ + return html`...`; + } + static get navTemplate(){ + return html`...`; + } + static get footerTemplate(){ + return html`...`; + } +} +``` + +### Example + +_my-app.js_ + +```js +{% include projects/docs/compose/my-app.js %} +``` + +{% include project.html folder="docs/compose" openFile="my-app.js" %} + +You can also compose templates by importing other elements and using them in a template: + +_my-app.js_ + +```js +import './header-element.js'; +import './nav-element.js'; +import './footer-element.js'; + +class MyApp extends LitElement { + render(){ + return html` + + + + `; + } +} +``` diff --git a/docs/docs/templates/design.md b/docs/docs/templates/design.md new file mode 100644 index 00000000..af281184 --- /dev/null +++ b/docs/docs/templates/design.md @@ -0,0 +1,67 @@ +--- +layout: post +title: Designing efficient LitElement templates +parent: /docs/ +type: concept +topic: /docs/templates +permalink: /docs/templates/design +--- + +
+ +### Summary + +LitElement-based elements render and re-render asynchronously, updating in response to batched property changes. To maximize performance, design your element templates as a function of element properties. + +
+ +### Efficient rendering + +LitElement templates react to property changes. By default, all of an element's properties are observed, and a change to any one of them will trigger an update. + +Updates are processed asynchronously, so that an element re-renders in response to a batch of property changes. Using lit-html to render and re-render templates, only the DOM nodes that change are re-drawn. + +This improves performance and ensures consistent state between and during property changes. + +The element below updates whenever either of its properties changes. Only the parts of the DOM that change are re-rendered. + +_my-element.js_ + +```js +{% include projects/docs/templates1/my-element.js %} +``` + +{% include project.html folder="docs/templates1" openFile="my-element.js" %} + +### Design templates as a function of properties + +To maximize the benefits of using the LitElement library, we recommend that you design your element's template as a pure function of its properties. + +This means that an element's `render` function + +* should not change the element's state. +* should not have side effects. +* should not depend on anything except the element's properties. +* should return the same result when given the same inputs; that is, with the same set of property values, you should get the same template. + +We also recommend that you avoid manipulating DOM. Instead, express the element's template as a function of its state, and capture element state in properties. + +### Example + +The following element uses inefficient DOM manipulation: + +_dom-manip.js_ + +```text +{% include projects/docs/templates/dom-manip.js %} +``` + +Rewrite the element's template as a function of its properties by capturing the load message as a property, and setting the property in response to the event: + +_update-properties.js_ + +```js +{% include projects/docs/templates/update-properties.js %} +``` + +{% include project.html folder="docs/templates" openFile="index.html" %} diff --git a/docs/docs/templates/expressions.md b/docs/docs/templates/expressions.md new file mode 100644 index 00000000..c835b916 --- /dev/null +++ b/docs/docs/templates/expressions.md @@ -0,0 +1,9 @@ +--- +layout: post +title: Use plain JavaScript expressions in a template +parent: /docs/ +type: task +topic: /docs/templates +permalink: /docs/templates/expressions +--- + diff --git a/docs/docs/templates/index.md b/docs/docs/templates/index.md new file mode 100644 index 00000000..4e36c921 --- /dev/null +++ b/docs/docs/templates/index.md @@ -0,0 +1,9 @@ +--- +layout: post +title: Write a template +parent: /docs/ +type: task +topic: /docs/templates +permalink: /docs/templates/index +--- + diff --git a/docs/docs/templates/slots.md b/docs/docs/templates/slots.md new file mode 100644 index 00000000..e25eb97a --- /dev/null +++ b/docs/docs/templates/slots.md @@ -0,0 +1,125 @@ +--- +layout: post +title: Render light DOM children in a template +parent: /docs/ +type: task +topic: /docs/templates +permalink: /docs/templates/slots +--- + +On this page: + +* [Render light DOM children with the `slot` element](#slot) +* [Named slots](#named) +* [Use `name`, not `id`, to select slots](#namenotid) + + + +### Render light DOM children with the `slot` element + +To render an element's light DOM children in shadow DOM, use the [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot): + +_my-element.js_ + +```js +render(){ + return html` +
+ +
+ `; +} +``` + +_index.html_ + +```html + +

Pls include me

+ +``` + + + +### Named slots + +You can render light DOM children in a specific slot by ensuring that the slot's `name` attribute matches the light DOM child's `slot` attribute: + +_my-element.js_ + +```js +render(){ + return html` +
+ + +
+ `; +} +``` + +_index.html_ + +```html + +

Pls include me in slot "one"

+ +``` + +* Named slots will only match light DOM children whose `slot` attribute matches their `name` attribute. + +* Light DOM children with a specified `slot` attribute will only match slots with a matching `name` attribute. + +* An un-named slot is called the "default" slot. Any number of light DOM children without a `slot` attribute may populate it. + +_my-element.js_ + +```js +render(){ + return html` +
+ + + +
+ `; +} +``` + +_index.html_ + +```html + +

Pls include me in slot "one"

+

I will not be in any slot.

+

I will be in the default slot.

+

So will I.

+ +``` + + + +### Use `name`, not `id`, to select slots + +Note that a `slot`'s `id` attribute has no effect! + +_my-element.js_ + +```js +render(){ + return html` +
+ +
+ `; +} +``` + +_index.html_ + +```html + +

nope

+ +``` + diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 00000000..f5c41f61 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,55 @@ +--- +layout: post +title: lit-element +--- +DONE: Create skeleton + +TODO: Needs product manager input + +lit-element is a lightweight library for creating custom elements. + +**Create fast, lightweight, reusable web components that work in any web page:** + +```js +class MyElement extends LitElement{ + // implemnt MyElement +} +``` + +```html + +``` + +**Write templates in plain HTML:** + +```js +render(){ + return html`

My element

`; +} +``` + +**Use simple JavaScript expressions to include properties, logic, and event handlers:** + +```js +render(){ + return html` + +

${this.myProp}

+ + +
    ${myArray.map(i => html`
  • ${i}
    • `)}
+ + +
${myBool?html`

true

`:html`

false

`}
+ + + + `; +} +``` + +Learn more: + +* [Try lit-element](/try/) without intalling anything. +* [Install lit-element locally](/tools/setup). +* [See the API documentation.](/api/). diff --git a/docs/package-lock.json b/docs/package-lock.json new file mode 100644 index 00000000..320283a3 --- /dev/null +++ b/docs/package-lock.json @@ -0,0 +1,31 @@ +{ + "name": "lit-element-docs", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@polymer/lit-element": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@polymer/lit-element/-/lit-element-0.6.1.tgz", + "integrity": "sha512-eselNs2lA4n1R1rSyPXW8XR3ISmbYVQcDtIMSINHVNZ56pCtCHOtgmaG8C4k0gONwikEMJTP9blNHD/gdYIxFA==", + "requires": { + "lit-html": "^0.11.4" + } + }, + "@stackblitz/sdk": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.2.0.tgz", + "integrity": "sha512-akrcKu7i1xw/VgdaZsREWoNTAm9F3d3hi0Yi44n2Zjq1RAal990W8WaX0NVc9qUkZr/++Lps/w+o2HQwExPMzw==" + }, + "@webcomponents/webcomponentsjs": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.1.3.tgz", + "integrity": "sha512-0UHJNY88lR3pnEYtBVT7F8cuuxOiITQGWJa0LxoELqkBSB7IabzJFOj5K99PajD3CGAsWpjB0CAeijfe376Y1w==" + }, + "lit-html": { + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-0.11.4.tgz", + "integrity": "sha512-yfJUxQrRjhYo4cdz3Db9YlkHs9v+rTZA4fvE/dqCOrA1Q2Bmx52X2OtEgGQ+JhyCb6ddDTndLijZjsSoQ44G7Q==" + } + } +} diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 00000000..17effbb9 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,26 @@ +{ + "name": "lit-element-docs", + "version": "1.0.0", + "description": "lit-element documentation", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/katejeffreys/lit-element-docs.git" + }, + "contributors": [ + "The Polymer Authors" + ], + "license": "BSD-3-Clause", + "bugs": { + "url": "https://github.com/katejeffreys/lit-element-docs/issues" + }, + "homepage": "https://github.com/katejeffreys/lit-element-docs#readme", + "dependencies": { + "@polymer/lit-element": "^0.6.1", + "@stackblitz/sdk": "^1.2.0", + "@webcomponents/webcomponentsjs": "^2.1.3" + } +} diff --git a/docs/polymer.json b/docs/polymer.json new file mode 100644 index 00000000..0cd62068 --- /dev/null +++ b/docs/polymer.json @@ -0,0 +1,9 @@ +{ + "npm": true, + "moduleResolution": "node", + "entrypoint": "src/index.html", + "builds": [{ + "name": "gh-pages", + "bundled": false + }] +} diff --git a/docs/projects/.DS_Store b/docs/projects/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..412b6e9896f97d83357992a7595e1853c3240079 GIT binary patch literal 6148 zcmeHK%TB{U3>-raMU_yG9QPOagH_dj0Y3m~I3NXzXnW6%-)8(MN{Mpi0Cr^0#yid` zbBJRAvOab9zzV>Eu82D0_H4Dq(lKKykP4&%-wNpW zq0kj;;NWPV4h9Cjns_PEOC?4O@p9%%@M_@T=;e?YJ|s?- zm{7z{=ktrvA=NQsDv%0XDxkABZKeHxOP`tlm6MhVqym3b0ckc5n>Al9dh6shwbvH< sBmHdT8lAyfG0|EvZ?qNPjd(@Z+^>Oyqm?sn<;46EP+ihef!|Qz3*$*6h5!Hn literal 0 HcmV?d00001 diff --git a/docs/projects/docs/annotations/custom-element.js b/docs/projects/docs/annotations/custom-element.js new file mode 100644 index 00000000..2ebc4eeb --- /dev/null +++ b/docs/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` +
Bind to a child element's text node. ${this.prop1}
+ +
Bind to a child element's attribute.
+ +

Bind to a child element's boolean attribute. + +

+ +

Bind to a child element's property. + +

+ +

+ `; + } + handlePls(e){ + var id = e.target.id; + console.log(id + '.'); + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/docs/annotations/index.html b/docs/projects/docs/annotations/index.html new file mode 100644 index 00000000..b036bb03 --- /dev/null +++ b/docs/projects/docs/annotations/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/projects/docs/annotations/index.ts b/docs/projects/docs/annotations/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/docs/annotations/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/docs/annotations/manifest.json b/docs/projects/docs/annotations/manifest.json new file mode 100644 index 00000000..9eca53a2 --- /dev/null +++ b/docs/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" +} diff --git a/docs/projects/docs/compose/index.html b/docs/projects/docs/compose/index.html new file mode 100644 index 00000000..8779e6d2 --- /dev/null +++ b/docs/projects/docs/compose/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/projects/docs/compose/index.ts b/docs/projects/docs/compose/index.ts new file mode 100644 index 00000000..4bc604e5 --- /dev/null +++ b/docs/projects/docs/compose/index.ts @@ -0,0 +1 @@ +import './my-app.js'; diff --git a/docs/projects/docs/compose/manifest.json b/docs/projects/docs/compose/manifest.json new file mode 100644 index 00000000..ebbc078f --- /dev/null +++ b/docs/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" +} diff --git a/docs/projects/docs/compose/my-app.js b/docs/projects/docs/compose/my-app.js new file mode 100644 index 00000000..a6b465bf --- /dev/null +++ b/docs/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` +
${this.headerText}
+ `; + } + static get navTemplate(){ + return html` + + `; + } + static get footerTemplate(){ + return html` +
${this.footerText}
+ `; + } + + render(){ + return html` + ${this.headerTemplate()} + ${this.navTemplate()} + ${this.footerTemplate()} + `; + } +} +customElements.define('my-app', MyApp); diff --git a/docs/projects/docs/create/index.html b/docs/projects/docs/create/index.html new file mode 100644 index 00000000..a3d38c6f --- /dev/null +++ b/docs/projects/docs/create/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/projects/docs/create/index.ts b/docs/projects/docs/create/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/docs/create/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/docs/create/manifest.json b/docs/projects/docs/create/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/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" + } +} diff --git a/docs/projects/docs/create/my-element.js b/docs/projects/docs/create/my-element.js new file mode 100644 index 00000000..a337257a --- /dev/null +++ b/docs/projects/docs/create/my-element.js @@ -0,0 +1,27 @@ +// Import the LitElement base class and html helper function +import { LitElement, html } from '@polymer/lit-element'; + +// Extend the LitElement base class +class MyElement extends LitElement { + + /** + * Implement `render` to define a template for your element. + * + * You must provide an implementation of `render` for any element + * that uses LitElement as a base class. + */ + render(){ + /** + * `render` must return a lit-html `TemplateResult`. + * + * To create a `TemplateResult`, tag a JavaScript template literal + * with the `html` helper function: + */ + return html` + +

A paragraph

+ `; + } +} +// Register the new element with the browser. +customElements.define('my-element', MyElement); diff --git a/docs/projects/docs/renderroot/default-root.js b/docs/projects/docs/renderroot/default-root.js new file mode 100644 index 00000000..7ab98752 --- /dev/null +++ b/docs/projects/docs/renderroot/default-root.js @@ -0,0 +1,14 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * This element renders its template into the default location: + * a shadowRoot created by LitElement. + */ +class DefaultRoot extends LitElement { + render(){ + return html` +

Default render root. Template renders in shadow DOM.

+ `; + } +} +customElements.define('default-root', DefaultRoot); diff --git a/docs/projects/docs/renderroot/index.html b/docs/projects/docs/renderroot/index.html new file mode 100644 index 00000000..3c646990 --- /dev/null +++ b/docs/projects/docs/renderroot/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/projects/docs/renderroot/index.ts b/docs/projects/docs/renderroot/index.ts new file mode 100644 index 00000000..e4a842ca --- /dev/null +++ b/docs/projects/docs/renderroot/index.ts @@ -0,0 +1,2 @@ +import './default-root.js'; +import './light-dom.js'; diff --git a/docs/projects/docs/renderroot/light-dom.js b/docs/projects/docs/renderroot/light-dom.js new file mode 100644 index 00000000..3fc68ecf --- /dev/null +++ b/docs/projects/docs/renderroot/light-dom.js @@ -0,0 +1,22 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * This element renders its template as light DOM children. + */ +class LightDom extends LitElement { + render(){ + return html` +

Render root overridden. Template renders in light DOM.

+ `; + } + /** + * To customize an element's render root, implement createRenderRoot. Return + * the node into which to render the element's template. + * + * This element renders child nodes into its light DOM. + */ + createRenderRoot(){ + return this; + } +} +customElements.define('light-dom', LightDom); diff --git a/docs/projects/docs/renderroot/manifest.json b/docs/projects/docs/renderroot/manifest.json new file mode 100644 index 00000000..160ee6a8 --- /dev/null +++ b/docs/projects/docs/renderroot/manifest.json @@ -0,0 +1,15 @@ +{ + "files": [ + "default-root.js", + "light-dom.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" + } +} diff --git a/docs/projects/docs/templates/dom-manip.js b/docs/projects/docs/templates/dom-manip.js new file mode 100644 index 00000000..1b0b3f79 --- /dev/null +++ b/docs/projects/docs/templates/dom-manip.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * Anti-pattern. Avoid manipulating DOM. + */ +class DomManip extends LitElement { + constructor(){ + super(); + this.addEventListener('stuff-loaded', this.doSomething.bind(this)); + this.loadStuff(); + } + render(){ + return html` +

Loading

+ `; + } + doSomething(){ + this.shadowRoot.getElementById('message').innerHTML='Loading complete.'; + } + loadStuff(){ + setInterval(() => { + var loaded = new CustomEvent('stuff-loaded', { detail: {}}); + this.dispatchEvent(loaded); + }, 3000); + } +} +customElements.define('dom-manip', DomManip); diff --git a/docs/projects/docs/templates/index.html b/docs/projects/docs/templates/index.html new file mode 100644 index 00000000..a4a8a4e9 --- /dev/null +++ b/docs/projects/docs/templates/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/projects/docs/templates/index.ts b/docs/projects/docs/templates/index.ts new file mode 100644 index 00000000..864cdbce --- /dev/null +++ b/docs/projects/docs/templates/index.ts @@ -0,0 +1,2 @@ +import './dom-manip.js'; +import './update-properties.js'; diff --git a/docs/projects/docs/templates/manifest.json b/docs/projects/docs/templates/manifest.json new file mode 100644 index 00000000..46a95d75 --- /dev/null +++ b/docs/projects/docs/templates/manifest.json @@ -0,0 +1,15 @@ +{ + "files": [ + "dom-manip.js", + "update-properties.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" + } +} diff --git a/docs/projects/docs/templates/update-properties.js b/docs/projects/docs/templates/update-properties.js new file mode 100644 index 00000000..2881f973 --- /dev/null +++ b/docs/projects/docs/templates/update-properties.js @@ -0,0 +1,34 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * Use this pattern instead. + */ +class UpdateProperties extends LitElement { + static get properties(){ + return { + message: String + }; + } + constructor(){ + super(); + this.message='Loading'; + this.addEventListener('stuff-loaded', this.doSomething.bind(this)); + this.loadStuff(); + } + render(){ + return html` +

${this.message}

+ `; + } + doSomething(){ + this.message='Loading complete.'; + } + loadStuff(){ + setInterval(() => { + var loaded = new CustomEvent('stuff-loaded', { detail: {}}); + this.dispatchEvent(loaded); + }, 3000); + } +} + +customElements.define('update-properties', UpdateProperties); diff --git a/docs/projects/docs/templates1/index.html b/docs/projects/docs/templates1/index.html new file mode 100644 index 00000000..934071cf --- /dev/null +++ b/docs/projects/docs/templates1/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/projects/docs/templates1/index.ts b/docs/projects/docs/templates1/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/docs/templates1/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/docs/templates1/manifest.json b/docs/projects/docs/templates1/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/projects/docs/templates1/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" + } +} diff --git a/docs/projects/docs/templates1/my-element.js b/docs/projects/docs/templates1/my-element.js new file mode 100644 index 00000000..5475bf2b --- /dev/null +++ b/docs/projects/docs/templates1/my-element.js @@ -0,0 +1,31 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + prop1: Number, + prop2: Number + }; + } + constructor(){ + super(); + this.prop1=0; + this.prop2=1; + } + render(){ + return html` +

Static paragraph.

+

prop1: ${this.prop1}

+ + + `; + } + updated(){ + console.log('Updated'); + } + changeMe(prop){ + var rand = Math.floor(Math.random()*100); + prop=='prop1'?this.prop1=rand:this.prop2=rand; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/projects/docs/tryexpressions/README.md b/docs/projects/docs/tryexpressions/README.md new file mode 100644 index 00000000..36a075b5 --- /dev/null +++ b/docs/projects/docs/tryexpressions/README.md @@ -0,0 +1,16 @@ +## Use simple JavaScript expressions for loops and conditionals + +Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: + +```js +render(){ + return html` +
    + ${myArray.map(i => html`
  • ${i}
    • `)} +
+ ${myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; +} +``` diff --git a/docs/projects/docs/tryexpressions/custom-element.js b/docs/projects/docs/tryexpressions/custom-element.js new file mode 100644 index 00000000..a5a6b9ce --- /dev/null +++ b/docs/projects/docs/tryexpressions/custom-element.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + render(){ + return html` +
    + ${this.myArray.map(i => html`
  • ${i}
    • `)} +
+ ${this.myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/docs/tryexpressions/index.html b/docs/projects/docs/tryexpressions/index.html new file mode 100644 index 00000000..eacfc6bb --- /dev/null +++ b/docs/projects/docs/tryexpressions/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/projects/docs/tryexpressions/index.ts b/docs/projects/docs/tryexpressions/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/docs/tryexpressions/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/docs/tryexpressions/manifest.json b/docs/projects/docs/tryexpressions/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/projects/docs/tryexpressions/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/projects/old/clone/README.md b/docs/projects/old/clone/README.md new file mode 100644 index 00000000..9f42b1be --- /dev/null +++ b/docs/projects/old/clone/README.md @@ -0,0 +1,93 @@ +To make sure object subproperty changes are rendered, use `Object.assign()` to rewrite the whole object when any of its subproperties change. + +```js +static get properties(){ + return { + student: Object + }; +} +constructor(){ + super(); + this.student={ id: '1234' name: 'Kazi' }; +} +_render({student}){ + return html` +
+ ${student.id} + ${student.name} +
+ `; +} +changeStudent(){ + // Don't do this: + // this.student.name='Lee'; + + // Do this instead: + this.student = Object.assign({}, this.student, { + name: 'Lee' + }); +} +``` + +## Background: JavaScript objects and arrays + +Changing an object subproperty or array item without reassigning the object itself is known as **mutation**. lit-element observes changes to the object itself, not its subproperties; so when you mutate an array or object, lit-element can't detect the change, and won't re-render the template. + +For this reason, when a subproperty changes, you should implement the change by cloning the object and merging it with its updated subproperties. Use [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) to do this. + +### Use Object.assign to make sure you create true clones + +JavaScript objects are references to locations in memory. If you create a naive copy of a JavaScript object, it will point to the same memory space as the original: + +```js +var thing = { + greeting: 'hello', + entity: 'world' +}; +// naive copy +var thing1 = thing; + +// also a naive copy +var thing2 = new Object(thing); +thing2.greeting='hi'; + +// all 3 point to the same memory space +if(thing===thing1===thing2){ + console.log('literally the same'); + console.log(thing.greeting, thing1.greeting, thing2.greeting); +} +``` + +Arrays are JavaScript `Object`s, and behave the same way: + +```js +var myArray=['some','boring','test','data']; +var otherArray=myArray; +otherArray[1]='nice'; +console.log(myArray[1]); +``` + +If you perform an update by creating a naive copy of an object (for example, with `var newObject = existingObject` or `var newObject = new Object('existingObject')`) instead of a true clone, you won't rewrite the object, and `_render` will not fire. + +## Object.assign + +To clone a new object, use `Object.assign()`: + +```js +var thing = { + greeting: 'hello', + entity: 'world' +}; +var newThing = Object.assign({}, thing); +newThing.greeting='hi'; +console.log(thing.greeting); +``` + +To clone a new array, you can also use `Object.assign()`: + +```js +var myArray=['some','boring','test','data']; +var newArray = Object.assign([], ...myArray); +newArray[1]='nice'; +console.log(myArray[1]); +``` diff --git a/docs/projects/old/clone/custom-element.js b/docs/projects/old/clone/custom-element.js new file mode 100644 index 00000000..88277310 --- /dev/null +++ b/docs/projects/old/clone/custom-element.js @@ -0,0 +1,36 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myArray: Array, + myObject: Object + }; + } + constructor(){ + super(); + this.myArray = ['hello', 'we', 'are', 'test', 'data']; + this.myObject = { + prop1: 'prop 1', + prop2: 'prop 2', + prop3: 'prop 3' + }; + } + _render({myArray, myObject}){ + return html` +
    + ${myArray.map(i => html`
  • ${i}
    • `)} +
+ +
+ myObject.prop1: ${myObject.prop1}
+ myObject.prop2: ${myObject.prop2}
+ myObject.prop3: ${myObject.prop3}
+ + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/old/clone/index.html b/docs/projects/old/clone/index.html new file mode 100644 index 00000000..58154c63 --- /dev/null +++ b/docs/projects/old/clone/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/projects/old/clone/index.js b/docs/projects/old/clone/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/old/clone/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/old/clone/manifest.json b/docs/projects/old/clone/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/projects/old/clone/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/projects/old/declare/README.md b/docs/projects/old/declare/README.md new file mode 100644 index 00000000..3cb8a571 --- /dev/null +++ b/docs/projects/old/declare/README.md @@ -0,0 +1,36 @@ +To declare custom element properties with lit-element, add a static `properties` getter to your custom element class: + +```js +static get properties(){ + return { + myString: String, + myObject: Object + }; +} +``` + +You can supply any of the properties declared in the static `properties` getter to the element's `_render` function. Use JavaScript expressions to insert property values into an HTML template: + +```js +_render({myString, myObject}){ + return html` +

${myString}

+

myObject.prop1: ${myObject.prop1}

+

myObject.prop2: ${myObject.prop2}

+ `; +} +``` + +
+ +**You must declare a property in the `properties` getter AND supply the property name to `_render` in order to use the property value in template markup.** + +If you forget to supply the property name to `_render`, you may see something like the following error message: + +```text +ReferenceError: myString is not defined at HTMLElement.CustomElement._render +``` + +
+ +lit-element automatically observes all of the properties you declare in the static `properties` getter, and efficiently renders the changes in DOM. diff --git a/docs/projects/old/declare/custom-element.js b/docs/projects/old/declare/custom-element.js new file mode 100644 index 00000000..6b07a2d9 --- /dev/null +++ b/docs/projects/old/declare/custom-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myString: String + }; + } + constructor(){ + super(); + this.myString='initial value'; + } + _render({myString}){ + return html` +

${myString}

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/old/declare/index.html b/docs/projects/old/declare/index.html new file mode 100644 index 00000000..095c86b8 --- /dev/null +++ b/docs/projects/old/declare/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/projects/old/declare/index.js b/docs/projects/old/declare/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/old/declare/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/old/declare/manifest.json b/docs/projects/old/declare/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/projects/old/declare/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/projects/old/dispatch/README.md b/docs/projects/old/dispatch/README.md new file mode 100644 index 00000000..41d6ffaa --- /dev/null +++ b/docs/projects/old/dispatch/README.md @@ -0,0 +1,39 @@ + +To bind a lit-element property to the attribute of another element: + +```html + +``` + +**custom-element.js** + +```js +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} +``` + +**index.html** + +```html + + +``` diff --git a/docs/projects/old/dispatch/custom-element.js b/docs/projects/old/dispatch/custom-element.js new file mode 100644 index 00000000..163cdbc0 --- /dev/null +++ b/docs/projects/old/dispatch/custom-element.js @@ -0,0 +1,25 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/old/dispatch/index.html b/docs/projects/old/dispatch/index.html new file mode 100644 index 00000000..45459f5e --- /dev/null +++ b/docs/projects/old/dispatch/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + diff --git a/docs/projects/old/dispatch/index.js b/docs/projects/old/dispatch/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/old/dispatch/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/old/dispatch/manifest.json b/docs/projects/old/dispatch/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/projects/old/dispatch/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/projects/old/initialize/README.md b/docs/projects/old/initialize/README.md new file mode 100644 index 00000000..bd676225 --- /dev/null +++ b/docs/projects/old/initialize/README.md @@ -0,0 +1,128 @@ +You can initialize property values for a lit-element: + +* From the element's constructor +* From markup in an HTML document that imports the element +* From a data binding inside another lit-element +* From a script that accesses the lit-element in DOM + +## Initialize a property from a lit-element constructor + +To initialize a property from a lit-element constructor: + +
my-element.js
+ +```js +constructor(){ + super(); + this.myString='initial value'; + this.myObject= { prop1: 'stuff', prop2: 'blah' } +} +``` + +
+ +**Always initialize object and array properties in the constructor if their subproperties or items are used in an HTML template.** It's fine to initialize objects to the empty object (`{}`), and arrays to the empty array (`[]`); but they must be initialized. For example, if `myObject.prop1` and `anotherObject.myArray[x]` are used in an element template, initialize them as follows: + +```js +static get properties(){ + return { + myObject: Object; + anotherObject: Object; + } +} +constructor(){ + // myObject.prop1 is used in this template, + // so initialize myObject + this.myObject={}; + + // anotherObject.myArray[0-n] are used in this template, + // so initialize anotherObject.myArray + this.anotherObject={ + myArray: [] + }; +} +_render({myObject, anotherObject}){ + return html` +

${myObject.prop1}

+
    + ${anotherObject.myArray.map(i=>`
  • ${i}
    • `)} +
+ `; +} +``` +
+ +## Initialize a property from markup in an HTML document + +To provide a value for an element's declared `String` or `Number` property when the element is used in an HTML document, include the value as a string: + +
index.html
+ +```html + + + + +``` + +To provide a value for an element's declared `Boolean` property when the element is used in an HTML document: + +
index.html
+ +```html + + + + + + + +``` + +
+ +**Only `String`, `Number` and `Boolean` properties can be initialized by supplying strings in HTML.** For performance reasons, lit-element does not support supplying Object or Array property values via strings in HTML markup. See [] for alternatives. + +
+ +## Initialize a property from a data binding in another lit-element template + +From inside another lit-element template, you can provide values to a lit-element with data bindings using JavaScript expressions: + +```js +import {LitElement, html} from '@polymer/lit-element'; +import './my-element.js'; + +class SomeElement extends LitElement { + ... + _render({prop1, prop2}){ + return html` + + `; + } +} +customElement.define('some-element', SomeElement); +``` + +
+ +**Supplying object and array property values with JavaScript expressions is...???** + +```js +import {LitElement, html} from '@polymer/lit-element'; +import './my-element.js'; + +class SomeElement extends LitElement { + /* + * Is this okay? + */ + _render({myObject}){ + return html` + + `; + } +} +customElement.define('some-element', SomeElement); +``` + +
diff --git a/docs/projects/old/initialize/custom-element.js b/docs/projects/old/initialize/custom-element.js new file mode 100644 index 00000000..6b07a2d9 --- /dev/null +++ b/docs/projects/old/initialize/custom-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myString: String + }; + } + constructor(){ + super(); + this.myString='initial value'; + } + _render({myString}){ + return html` +

${myString}

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/old/initialize/index.html b/docs/projects/old/initialize/index.html new file mode 100644 index 00000000..095c86b8 --- /dev/null +++ b/docs/projects/old/initialize/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/projects/old/initialize/index.js b/docs/projects/old/initialize/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/old/initialize/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/old/initialize/manifest.json b/docs/projects/old/initialize/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/projects/old/initialize/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/projects/old/listeners/README.md b/docs/projects/old/listeners/README.md new file mode 100644 index 00000000..41d6ffaa --- /dev/null +++ b/docs/projects/old/listeners/README.md @@ -0,0 +1,39 @@ + +To bind a lit-element property to the attribute of another element: + +```html + +``` + +**custom-element.js** + +```js +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} +``` + +**index.html** + +```html + + +``` diff --git a/docs/projects/old/listeners/custom-element.js b/docs/projects/old/listeners/custom-element.js new file mode 100644 index 00000000..163cdbc0 --- /dev/null +++ b/docs/projects/old/listeners/custom-element.js @@ -0,0 +1,25 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/old/listeners/index.html b/docs/projects/old/listeners/index.html new file mode 100644 index 00000000..45459f5e --- /dev/null +++ b/docs/projects/old/listeners/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + diff --git a/docs/projects/old/listeners/index.js b/docs/projects/old/listeners/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/old/listeners/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/old/listeners/manifest.json b/docs/projects/old/listeners/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/projects/old/listeners/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/projects/old/objects/README.md b/docs/projects/old/objects/README.md new file mode 100644 index 00000000..144b867e --- /dev/null +++ b/docs/projects/old/objects/README.md @@ -0,0 +1,92 @@ +For performance reasons, lit-element does not support deserializing object and array properties via attributes in markup. + +Here's how we recommend you initialize array and object properties: + +## Set object properties directly instead of passing them via attributes + +Instead of passing stringified object and array properties via attributes in markup, set object and array properties directly: + +**main-app.js** + +```js +_render({}){ + return html` + + `; +} +_firstRendered(){ + const studentRec = this.shadowDom.querySelector('student-rec'); + studentRec.student={ + id: '12345', + name: 'Yasmeen' + }; +} +``` + +**student-rec.js** + +```js +properties(){ + return { + student: Object + } +} +constructor(){ + super(); + this.student = {}; +} +_render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; +} +``` + +## Use the html helper function with JavaScript expressions to initialize object properties + +You can import and use the `html` helper function to initialize array and object properties. For example: + +**main-app.js** + +```js +_getStudent(){ + return { + id: '12345', + name: 'Yasmeen' + }; +} +_render({}){ + return html` + + `; +} +``` + +**student-rec.js** + +```js +properties(){ + return { + student: Object + } +} +constructor(){ + super(); + this.student = {}; +} +_render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; +} +``` + +## Implement _deserializeValue + +If you need to deserialize properties from a string, [implement the `_deserializeValue` method](https://github.com/Polymer/lit-element/blob/2433ce376521aa8ab5272aa9c12a49ee74ac8c4e/custom_typings/polymer.d.ts#L304). diff --git a/docs/projects/old/objects/index.html b/docs/projects/old/objects/index.html new file mode 100644 index 00000000..7736e292 --- /dev/null +++ b/docs/projects/old/objects/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/projects/old/objects/index.js b/docs/projects/old/objects/index.js new file mode 100644 index 00000000..3ce9fa8f --- /dev/null +++ b/docs/projects/old/objects/index.js @@ -0,0 +1 @@ +import './main-app.js'; diff --git a/docs/projects/old/objects/main-app.js b/docs/projects/old/objects/main-app.js new file mode 100644 index 00000000..88ab3929 --- /dev/null +++ b/docs/projects/old/objects/main-app.js @@ -0,0 +1,19 @@ +import { LitElement, html } from '@polymer/lit-element'; +import './student-rec.js'; + +class MainApp extends LitElement { + _render({}){ + return html` + + `; + } + _firstRendered(){ + const studentRec = this.shadowRoot.querySelector('student-rec'); + studentRec.student={ + id: '12345', + name: 'Yasmeen' + }; + } +} + +customElements.define('main-app', MainApp); diff --git a/docs/projects/old/objects/manifest.json b/docs/projects/old/objects/manifest.json new file mode 100644 index 00000000..41800609 --- /dev/null +++ b/docs/projects/old/objects/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "main-app.js", + "student-rec.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/projects/old/objects/student-rec.js b/docs/projects/old/objects/student-rec.js new file mode 100644 index 00000000..09aea9d5 --- /dev/null +++ b/docs/projects/old/objects/student-rec.js @@ -0,0 +1,23 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class StudentRec extends LitElement { + static get properties(){ + return { + student: Object + } + } + constructor(){ + super(); + this.student = {}; + } + _render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; + } +} + +customElements.define('student-rec', StudentRec); diff --git a/docs/projects/old/share/README.md b/docs/projects/old/share/README.md new file mode 100644 index 00000000..714edde7 --- /dev/null +++ b/docs/projects/old/share/README.md @@ -0,0 +1,13 @@ +This page is about sharing data upwards (from child to parent elements). For info about binding data downwards (from a parent element to a child element), see [data binding](/data/bind). + +lit-element doesn't support two-way data binding. To get the same effect, you have a few options. + +## Props down, events up + +For downwards data flow, use property bindings. + +For upwards data flow, use events. + +## State management + + diff --git a/docs/projects/old/share/child-1.js b/docs/projects/old/share/child-1.js new file mode 100644 index 00000000..933b9959 --- /dev/null +++ b/docs/projects/old/share/child-1.js @@ -0,0 +1,29 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class Child1 extends LitElement { + static get properties(){ + return { + stuff: String + }; + } + constructor(){ + super(); + this.stuff=''; + } + _render({stuff}){ + return html` +

${stuff}

+ + `; + } + +} + +customElements.define('child-1', Child1); diff --git a/docs/projects/old/share/child-2.js b/docs/projects/old/share/child-2.js new file mode 100644 index 00000000..4a4844b9 --- /dev/null +++ b/docs/projects/old/share/child-2.js @@ -0,0 +1,29 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class Child2 extends LitElement { + static get properties(){ + return { + stuff: String + }; + } + constructor(){ + super(); + this.stuff=''; + } + _render({stuff}){ + return html` +

${stuff}

+ + `; + } + +} + +customElements.define('child-2', Child2); diff --git a/docs/projects/old/share/index.html b/docs/projects/old/share/index.html new file mode 100644 index 00000000..665bd2bb --- /dev/null +++ b/docs/projects/old/share/index.html @@ -0,0 +1,18 @@ + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/projects/old/share/index.js b/docs/projects/old/share/index.js new file mode 100644 index 00000000..d9e1b247 --- /dev/null +++ b/docs/projects/old/share/index.js @@ -0,0 +1 @@ +import './parent-element.js'; diff --git a/docs/projects/old/share/manifest.json b/docs/projects/old/share/manifest.json new file mode 100644 index 00000000..dc0236c3 --- /dev/null +++ b/docs/projects/old/share/manifest.json @@ -0,0 +1,16 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "parent-element.js", + "child-1.js", + "child-2.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/projects/old/share/parent-element.js b/docs/projects/old/share/parent-element.js new file mode 100644 index 00000000..b463f0bf --- /dev/null +++ b/docs/projects/old/share/parent-element.js @@ -0,0 +1,41 @@ +import { LitElement, html } from '@polymer/lit-element'; +import './child-1.js'; +import './child-2.js'; + +class ParentElement extends LitElement { + static get properties(){ + return { + data: Object + }; + } + constructor(){ + super(); + this.data = { + prop1: 'stuff', + prop2: 'more stuff' + } + } + _render({data}){ + return html` +

parent-element

+

data.prop1: ${data.prop1}

+

data.prop2: ${data.prop2}

+

child-1

+ + +

child-2

+ + + `; + } +} + +customElements.define('parent-element', ParentElement); diff --git a/docs/projects/try/create/README.md b/docs/projects/try/create/README.md new file mode 100644 index 00000000..932a89e2 --- /dev/null +++ b/docs/projects/try/create/README.md @@ -0,0 +1,3 @@ +## lit-element docs + +This is a code sample for the lit-element docs. diff --git a/docs/projects/try/create/custom-element.js b/docs/projects/try/create/custom-element.js new file mode 100644 index 00000000..cac6a6c6 --- /dev/null +++ b/docs/projects/try/create/custom-element.js @@ -0,0 +1,14 @@ +// Import and extend the LitElement base class. +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + // Return your template from lit-element's `render` function. + render(){ + return html` + +

hello world from custom-element

+ `; + } +} +// Register the new element with the browser. +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/try/create/index.html b/docs/projects/try/create/index.html new file mode 100644 index 00000000..814d63a2 --- /dev/null +++ b/docs/projects/try/create/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/projects/try/create/index.ts b/docs/projects/try/create/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/try/create/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/try/create/manifest.json b/docs/projects/try/create/manifest.json new file mode 100644 index 00000000..bce55e53 --- /dev/null +++ b/docs/projects/try/create/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "custom-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" + } +} diff --git a/docs/projects/try/events/README.md b/docs/projects/try/events/README.md new file mode 100644 index 00000000..23e0c9e2 --- /dev/null +++ b/docs/projects/try/events/README.md @@ -0,0 +1,14 @@ +## Add event listeners in plain HTML + +Use JavaScript expressions to add event listeners in plain HTML: + +```js +render(){ + return html` + + `; +} +clickHander(event){ + console.log(event.detail); +} +``` diff --git a/docs/projects/try/events/custom-element.js b/docs/projects/try/events/custom-element.js new file mode 100644 index 00000000..c10a5737 --- /dev/null +++ b/docs/projects/try/events/custom-element.js @@ -0,0 +1,15 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + render(){ + return html` +

check the console

+ + `; + } + clickHandler(event){ + console.log(event.target.id + ' was clicked.'); + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/try/events/index.html b/docs/projects/try/events/index.html new file mode 100644 index 00000000..79284648 --- /dev/null +++ b/docs/projects/try/events/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/projects/try/events/index.ts b/docs/projects/try/events/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/try/events/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/try/events/manifest.json b/docs/projects/try/events/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/projects/try/events/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/projects/try/expressions/README.md b/docs/projects/try/expressions/README.md new file mode 100644 index 00000000..36a075b5 --- /dev/null +++ b/docs/projects/try/expressions/README.md @@ -0,0 +1,16 @@ +## Use simple JavaScript expressions for loops and conditionals + +Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: + +```js +render(){ + return html` +
    + ${myArray.map(i => html`
  • ${i}
    • `)} +
+ ${myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; +} +``` diff --git a/docs/projects/try/expressions/custom-element.js b/docs/projects/try/expressions/custom-element.js new file mode 100644 index 00000000..a5a6b9ce --- /dev/null +++ b/docs/projects/try/expressions/custom-element.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + render(){ + return html` +
    + ${this.myArray.map(i => html`
  • ${i}
    • `)} +
+ ${this.myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/try/expressions/index.html b/docs/projects/try/expressions/index.html new file mode 100644 index 00000000..eacfc6bb --- /dev/null +++ b/docs/projects/try/expressions/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/projects/try/expressions/index.ts b/docs/projects/try/expressions/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/try/expressions/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/try/expressions/manifest.json b/docs/projects/try/expressions/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/projects/try/expressions/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/projects/try/properties/README.md b/docs/projects/try/properties/README.md new file mode 100644 index 00000000..932a89e2 --- /dev/null +++ b/docs/projects/try/properties/README.md @@ -0,0 +1,3 @@ +## lit-element docs + +This is a code sample for the lit-element docs. diff --git a/docs/projects/try/properties/custom-element.js b/docs/projects/try/properties/custom-element.js new file mode 100644 index 00000000..de47c3e0 --- /dev/null +++ b/docs/projects/try/properties/custom-element.js @@ -0,0 +1,25 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + // Declare properties. + static get properties(){ + return { + headingtext: { type: String } + }; + } + constructor(){ + // Always call superconstructor when you override the constructor. + super(); + + // You can initialize properties in the element constructor. + this.headingtext='Hello World!'; + } + render(){ + return html` + +

${this.headingtext}

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/try/properties/index.html b/docs/projects/try/properties/index.html new file mode 100644 index 00000000..4fbc7716 --- /dev/null +++ b/docs/projects/try/properties/index.html @@ -0,0 +1,16 @@ + + + + + + + + + lit-element code sample + + + + + + + diff --git a/docs/projects/try/properties/index.ts b/docs/projects/try/properties/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/try/properties/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/try/properties/manifest.json b/docs/projects/try/properties/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/projects/try/properties/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/projects/try/style/README.md b/docs/projects/try/style/README.md new file mode 100644 index 00000000..932a89e2 --- /dev/null +++ b/docs/projects/try/style/README.md @@ -0,0 +1,3 @@ +## lit-element docs + +This is a code sample for the lit-element docs. diff --git a/docs/projects/try/style/custom-element.js b/docs/projects/try/style/custom-element.js new file mode 100644 index 00000000..2b7d187f --- /dev/null +++ b/docs/projects/try/style/custom-element.js @@ -0,0 +1,13 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + render(){ + return html` + +

hello world from custom-element

+ `; + } +} +customElements.define('custom-element', CustomElement); diff --git a/docs/projects/try/style/index.html b/docs/projects/try/style/index.html new file mode 100644 index 00000000..7377576f --- /dev/null +++ b/docs/projects/try/style/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + +

A paragraph in the main document

+ diff --git a/docs/projects/try/style/index.ts b/docs/projects/try/style/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/projects/try/style/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/projects/try/style/manifest.json b/docs/projects/try/style/manifest.json new file mode 100644 index 00000000..7ee1f9ca --- /dev/null +++ b/docs/projects/try/style/manifest.json @@ -0,0 +1,15 @@ +{ + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/src/index.html b/docs/src/index.html new file mode 100644 index 00000000..bb30356f --- /dev/null +++ b/docs/src/index.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + +
+

+ lit-element docs +

+ + + + + +
+ + + + diff --git a/docs/src/index.js b/docs/src/index.js new file mode 100644 index 00000000..475d7423 --- /dev/null +++ b/docs/src/index.js @@ -0,0 +1,3 @@ +import './stack-blitz.js'; +import './project-loader.js'; +import './project-displayer.js'; diff --git a/docs/src/project-displayer.bak b/docs/src/project-displayer.bak new file mode 100644 index 00000000..d113c3b6 --- /dev/null +++ b/docs/src/project-displayer.bak @@ -0,0 +1,132 @@ +import {LitElement, html} from '@polymer/lit-element'; +import './project-loader.js'; + +class ProjectDisplayer extends LitElement { + static get properties(){ + return { + folder: { type: String }, + + clickToLoad: { type: Boolean }, + forceEmbedLayout: { type: Boolean }, + view: { type: String }, + openFile: { type: String }, + height: { type: Number }, + + options: { type: Object }, + project: { type: Object } + }; + } + updateSelectedFile(i){ + var filenames = this.shadowRoot.getElementById('filenames').getElementsByClassName('filename'); + for (var el = 0; el < filenames.length; el++) { + console.log(filenames[el]); + filenames[el].className = 'filename'; + }; + var filecontents = this.shadowRoot.getElementById('filecontents').getElementsByClassName('filecontents'); + for (var el = 0; el < filecontents.length; el++) { + filecontents[el].className = 'filecontents'; + filecontents[el].style.display = 'none'; + }; + + this.shadowRoot.getElementById('filename-' + i).className += ' selected'; + this.shadowRoot.getElementById('contents-' + i).className += ' selected'; + this.shadowRoot.getElementById('contents-' + i).style.display = 'block'; + } + + constructor(){ + super(); + this.project={}; + } + render(){ + var filenames=[]; + if(this.project.files) var filenames=Object.keys(this.project.files); + return html` + + + +
+
${filenames.map(i => html` + ${i} + `)} + +
+
${filenames.map(i => html` +
+ 
${this.project.files[i]}
+
`)} +
+
+ + `; + } + firstUpdated(){ + this.options=Object.assign({}, this.options, { + 'clickToLoad':this.clickToLoad, + 'forceEmbedLayout':this.forceEmbedLayout, + 'view':this.view?this.view:'both', + 'openFile':this.openFile?this.openFile:'index.html', + 'height':this.height?this.height:(window.innerHeight-10)/2 + }); + } + + toggle(){ + var dynamicsample = this.shadowRoot.getElementById("dynamicsample").style.display; + this.shadowRoot.getElementById("dynamicsample").style.display = + this.shadowRoot.getElementById("staticsample").style.display; + this.shadowRoot.getElementById("staticsample").style.display = dynamicsample; + + } + displayProject(project){ + this.project = Object.assign({}, project); + this.requestUpdate(); + this.embedProject(project); + this.shadowRoot.getElementById('toggle').disabled = false; + } + async embedProject(project){ + var slot = this.shadowRoot.getElementById("slot"); + var embed = slot.assignedNodes()[0]; + if(embed.tagName=='STACK-BLITZ'){ + return embed.embedProject(project, this.options); + } else console.log('Put in light DOM to embed a code sample.') + } +} + +customElements.define('project-displayer', ProjectDisplayer); diff --git a/docs/src/project-displayer.js b/docs/src/project-displayer.js new file mode 100644 index 00000000..13bee948 --- /dev/null +++ b/docs/src/project-displayer.js @@ -0,0 +1,63 @@ +import {LitElement, html} from '@polymer/lit-element'; +import './project-loader.js'; + +class ProjectDisplayer extends LitElement { + static get properties(){ + return { + folder: { type: String }, + + clickToLoad: { type: Boolean }, + forceEmbedLayout: { type: Boolean }, + view: { type: String }, + openFile: { type: String }, + height: { type: Number }, + + options: { type: Object }, + project: { type: Object } + }; + } + + constructor(){ + super(); + this.project={}; + } + render(){ + return html` + + + +
+ +
+ `; + } + firstUpdated(){ + this.options=Object.assign({}, this.options, { + 'clickToLoad':this.clickToLoad, + 'forceEmbedLayout':this.forceEmbedLayout, + 'view':this.view?this.view:'both', + 'openFile':this.openFile?this.openFile:'index.html', + 'height':this.height?this.height:(window.innerHeight-10)/2 + }); + } + displayProject(project){ + this.project = Object.assign({}, project); + this.requestUpdate(); + this.embedProject(project); + } + async embedProject(project){ + var slot = this.shadowRoot.getElementById("slot"); + var embed = slot.assignedNodes()[0]; + if(embed.tagName=='STACK-BLITZ'){ + return embed.embedProject(project, this.options); + } else console.log('Put in light DOM to embed a code sample.') + } +} + +customElements.define('project-displayer', ProjectDisplayer); diff --git a/docs/src/project-loader.js b/docs/src/project-loader.js new file mode 100644 index 00000000..915d5846 --- /dev/null +++ b/docs/src/project-loader.js @@ -0,0 +1,59 @@ +import { LitElement, html } from '@polymer/lit-element'; + +export class ProjectLoader extends LitElement { + static get properties(){ + return { + folder: { type: String }, + project: { type: Object } + }; + } + + render(){ + return html``; + } + + firstUpdated(){ + this.project={}; + this.loadProject(); + } + + loadProject(){ + if(this.folder=='undefined'){ + console.log("Missing folder property."); + return; + } else console.log('loading', this.folder); + fetch(`${this.folder}/manifest.json`) + .then(response => { return response.json() }) + .then(manifest => { + return this.getFiles(manifest).then(filesArray => { + var filesObject = filesArray.reduce((prev, curr) => { + return Object.assign({}, prev, curr); + }); + this.project = Object.assign({}, manifest, { files: filesObject }); + var projectLoadedEvent = new CustomEvent('project-loaded', { + detail: { project: this.project }, + bubbles: true + }); + return projectLoadedEvent; + }).then((projectLoadedEvent) => { + this.dispatchEvent(projectLoadedEvent); + }).catch((error) => {console.log(error)}); + }).catch((error) => {console.log(error)}); + } + getFiles(manifest){ + return Promise.all(manifest.files.map(filename => { return ( + fetch(`${this.folder}/${filename}`) + .then(result => { + return result.text().then(r => { + return { [filename]: this.uglyHack(r) } + }).catch((error) => {console.log(error)}); + }) + )})).catch((error) => {console.log(error)}); + } + uglyHack(r){ + var regex = /\.\.\//g; + return (r.replace("../node_modules/", "").replace(regex, "")); + } +}; + +customElements.define('project-loader', ProjectLoader); diff --git a/docs/src/stack-blitz.js b/docs/src/stack-blitz.js new file mode 100644 index 00000000..f9baa5ba --- /dev/null +++ b/docs/src/stack-blitz.js @@ -0,0 +1,56 @@ +import {LitElement, html} from '@polymer/lit-element'; +import sdk from '@stackblitz/sdk'; +import './project-loader'; + +class StackBlitz extends LitElement { + static get properties(){ + return { + folder: { type: String }, + slot: { type: String}, + + clickToLoad: { type: Boolean }, + forceEmbedLayout: { type: Boolean }, + view: { type: String }, + openFile: { type: String }, + height: { type: Number }, + + options: { type: Object }, + project: { type: Object } + }; + } + render(){ + return html` + + ${this.slot=="embed"?html``:html` + + `} +
+ `; + } + + firstUpdated(){ + this.options=Object.assign({}, this.options, { + 'clickToLoad':this.clickToLoad, + 'forceEmbedLayout':this.forceEmbedLayout, + 'view':this.view?this.view:'both', + 'openFile':this.openFile?this.openFile:'index.html', + 'height':this.height?this.height:(window.innerHeight-10)/2 + }); + this.project={}; + } + + embedProject(project, options){ + var embedIn = this.shadowRoot.getElementById('stackblitz'); + const vm = sdk.embedProject(embedIn, project, options); + } +}; + +customElements.define('stack-blitz', StackBlitz); diff --git a/docs/styleguide.md b/docs/styleguide.md new file mode 100644 index 00000000..d6d16ab0 --- /dev/null +++ b/docs/styleguide.md @@ -0,0 +1,54 @@ +--- +layout: post +title: lit-element style guide +--- + +```text +Possible Outline + + Code + + Typescript + Identifiers + + Project structure + + Choose filename + Manage dependencies + + Private/public/protected etc + + Elements + + Design an element + Name an element + Define and register an element + + Data + Declare a property + Name a property + Bind properties to data + Attributes + Boolean attributes + Properties + Values + Deserialize attributes + Deserialize string attributes + Deserialize number attributes + Deserialize object and array attributes + + Methods + Implement lit-element methods + Implement your own methods + + Events + Name custom events + Name and write event handlers + Click vs tap + + Reusable code + Name and write class mixins + Apply class mixins + Name and write shareable behaviors + Apply shareable behaviors +``` \ No newline at end of file diff --git a/docs/tools/index.md b/docs/tools/index.md new file mode 100644 index 00000000..bd0b0352 --- /dev/null +++ b/docs/tools/index.md @@ -0,0 +1,61 @@ +--- +layout: post +title: Tools +parent: /tools/ +--- + +See [Set up locally](setup) for detailed installation instructions. + +* [Quick setup](#quick) +* [Development tools](#dev) +* [Build and deployment tools](#build) + +
+ + + +## Quick setup + +See [Set up locally](setup) for detailed installation instructions. Here's the quick version: + +1. Install pre-requisites (Git, Node.js and npm, and Polymer CLI). + +2. Update to the latest versions of npm and Polymer CLI: + + ``` + npm install -g npm@latest + npm install -g polymer-cli@latest + ``` + +3. Add lit-element to an existing npm project: + + ``` + npm install --save @polymer/lit-element + ``` + +
+ + + +### Development tools + +```text +Polymer CLI (`polymer serve`) +Text editor + HTML syntax highlighting inside JavaScript template literals +Debugging tools +``` + +
+ + + +### Build and deployment tools + +```text +Polymer CLI + polymer.json config +WebPack +Rollup +Firebase +``` diff --git a/docs/tools/setup.md b/docs/tools/setup.md new file mode 100644 index 00000000..8457bd34 --- /dev/null +++ b/docs/tools/setup.md @@ -0,0 +1,91 @@ +--- +layout: post +title: Set up lit-element locally +parent: /tools/ +--- + +* [Install pre-requisites](#install) +* [Serve a sample project](#serve) +* [Build the sample project](#build) + +
+ + + +## Install pre-requisites + +To work locally with lit-element, you'll first need to install Git, npm and Node.js, and the Polymer CLI. + +1. [Install Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git). + +2. [Install npm and Node.js](https://nodejs.org/en/). + +3. Update npm: + + ```bash + npm install -g npm@latest + ``` + +4. Install Polymer CLI: + + ```bash + npm install -g polymer-cli@latest + ``` + +
+ + + +## Serve a sample project + +1. Use Git to copy a sample lit-element project: + + ```bash + git clone https://github.com/polymerlabs/start-lit.git + ``` + +2. Go to the `start-lit` folder: + + ```bash + cd start-lit + ``` + +3. Install the project's dependencies: + + ```bash + npm install + ``` + +4. Serve the project locally: + + ```bash + polymer serve + ``` + +
+ + + +## Build the sample project + +lit-element code needs a few changes for web browsers to load it. During developent, the Polymer CLI development server (`polymer serve`) handles this for you. + +To deploy a lit-element project to the web, you need to build it. Configure build options in `polymer.json`, then run `polymer build`. + +We've included a [sample polymer.json file in the start-lit project](https://github.com/polymerlabs/start-lit/link-to/polymer.json) to get you up and running. + +See the [Polymr CLI documentation](https://www.polymer-project.org/3.0/docs/tools/polymer-cli) for instructions on configuring your build. + +**To build the start-lit sample project:** + +1. Go to your root project folder: + + ```bash + cd start-lit + ``` + +2. Use Polymer CLI to build your project: + + ```bash + polymer build + ``` diff --git a/docs/try/create.md b/docs/try/create.md new file mode 100644 index 00000000..f31bd7fa --- /dev/null +++ b/docs/try/create.md @@ -0,0 +1,30 @@ +--- +layout: post +title: Create your first custom element +parent: /try/ +next: /try/properties +nexttitle: Add a property value to your template +type: task +--- + +To create a new custom element with lit-element: + +* Import and extend the `LitElement` base class. +* Define your element template inside lit-element's `render` function. +* Register the new element with the browser. + +You can now import your element as a JavaScript module, and use it in markup. + +_custom-element.js_ + +```js +{% include projects/try/create/custom-element.js %} +``` + +_index.html_ + +```html +{% include projects/try/create/index.html %} +``` + +{% include project.html folder="try/create" %} diff --git a/docs/try/events.md b/docs/try/events.md new file mode 100644 index 00000000..395f40ed --- /dev/null +++ b/docs/try/events.md @@ -0,0 +1,60 @@ +--- +layout: post +title: Use event handlers in templates +parent: /try/ +next: /try/style +nexttitle: Style +prev: /try/expressions +prevtitle: Write loops and conditionals +type: task +--- + +Use lit-html's `@event` notation to add an event handler to an element inside a template. For example: + +Print `click` events for a button to the console: + +```js +render(){ + return html` + + `; +} +``` + +Send `click` events for a button to a method on your element: + +```js +doStuff(e){ + console.log(e); + console.log(e.detail); + console.log(e.target.id); +} +render(){ + return html` + + `; +} +``` + +_custom-element.js_ +```js +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + render(){ + return html` +

check the console

+ + `; + } + clickHandler(event){ + console.log(event.target.id + ' was clicked.'); + } +} + +customElements.define('custom-element', CustomElement); +``` + +{% include project.html folder="try/events" openFile="custom-element.js" %} diff --git a/docs/try/expressions.md b/docs/try/expressions.md new file mode 100644 index 00000000..66e36326 --- /dev/null +++ b/docs/try/expressions.md @@ -0,0 +1,27 @@ +--- +layout: post +title: Write loops and conditionals with simple JavaScript expressions +parent: /try/ +next: /try/events +nexttitle: Use event handlers +prev: /try/props +prevtitle: Use properties +type: task +--- + +Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: + +```js +render(){ + return html` +
    + ${this.myArray.map(i => html`
  • ${i}
    • `)} +
+ ${this.myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; +} +``` + +{% include project.html folder="try/expressions" openFile="custom-element.js" %} diff --git a/docs/try/index.md b/docs/try/index.md new file mode 100644 index 00000000..d9096b22 --- /dev/null +++ b/docs/try/index.md @@ -0,0 +1,18 @@ +--- +layout: post +title: Try lit-element +type: task +--- + +Build your first web component and use it in a web page. + +Try lit-element in live code samples without installing anything: + +* [Create your first custom element](create). +* [Use your custom element in a web page](use). +* [Add a property value to your element template](properties). +* [Add a loop and an “if” statement to your template](expressions). +* [Add an event handler to your template](events). +* [Style your element template](style). + +If you're ready to dive in, [Set up lit-element locally](/tools/setup) to get started with your own development environment. diff --git a/docs/try/properties.md b/docs/try/properties.md new file mode 100644 index 00000000..f1d698b4 --- /dev/null +++ b/docs/try/properties.md @@ -0,0 +1,45 @@ +--- +layout: post +title: Use properties in templates +parent: /try/ +next: /try/expressions +nexttitle: Write loops and conditionals +prev: /try/create +prevtitle: Create an element +type: task +--- + +To render property values in your element templates: + +* Declare your properties, for example, in a static getter. +* Add properties to your template with JavaScript expressions. +* You can initialize properties in the element constructor. + +**custom-element.js** +```js +class CustomElement extends LitElement { + // Declare properties. + static get properties(){ + return { + headingtext: { type: String } + }; + } + constructor(){ + // Always call superconstructor when you override the constructor. + super(); + + // You can initialize properties in the element constructor. + this.headingtext='Hello World!'; + } + render(){ + return html` + +

${this.headingtext}

+ `; + } +} +``` + +lit-element automatically observes and renders property changes. + +{% include project.html folder="try/properties" openFile="custom-element.js" %} diff --git a/docs/try/style.md b/docs/try/style.md new file mode 100644 index 00000000..82668e2a --- /dev/null +++ b/docs/try/style.md @@ -0,0 +1,41 @@ +--- +layout: post +title: Style an element template +parent: /try/ +prev: /try/events +prevtitle: Use event handlers +type: task +--- + +Style an element by including a `style` block in its template: + +_custom-element.js_ + +```js +render(){ + return html` + +

hello world from custom-element

+ `; +} +``` + +Styles inside custom element templates are encapsulated. These styles will only affect elements inside the template-not the main document. + +_index.html_ + +```html + + + + + + +

A paragraph in the main document

+ + +``` + +{% include project.html folder="try/style" openFile="custom-element.js" %} diff --git a/docs/try/use.md b/docs/try/use.md new file mode 100644 index 00000000..e69de29b From 296ed7197fd330523f530f7c76a6a8176af3c958 Mon Sep 17 00:00:00 2001 From: Kate Jeffreys Date: Tue, 16 Oct 2018 00:24:26 -0700 Subject: [PATCH 02/52] add includes --- docs/_includes/projects/.DS_Store | Bin 0 -> 6148 bytes .../docs/annotations/custom-element.js | 44 ++++++ .../projects/docs/annotations/index.html | 19 +++ .../projects/docs/annotations/index.ts | 1 + .../projects/docs/annotations/manifest.json | 14 ++ .../projects/docs/compose/index.html | 17 +++ docs/_includes/projects/docs/compose/index.ts | 1 + .../projects/docs/compose/manifest.json | 14 ++ .../_includes/projects/docs/compose/my-app.js | 51 +++++++ .../_includes/projects/docs/create/index.html | 16 +++ docs/_includes/projects/docs/create/index.ts | 1 + .../projects/docs/create/manifest.json | 14 ++ .../projects/docs/create/my-element.js | 27 ++++ .../projects/docs/renderroot/default-root.js | 14 ++ .../projects/docs/renderroot/index.html | 19 +++ .../projects/docs/renderroot/index.ts | 2 + .../projects/docs/renderroot/light-dom.js | 22 +++ .../projects/docs/renderroot/manifest.json | 15 ++ .../projects/docs/templates/dom-manip.js | 27 ++++ .../projects/docs/templates/index.html | 19 +++ .../projects/docs/templates/index.ts | 2 + .../projects/docs/templates/manifest.json | 15 ++ .../docs/templates/update-properties.js | 34 +++++ .../projects/docs/templates1/index.html | 17 +++ .../projects/docs/templates1/index.ts | 1 + .../projects/docs/templates1/manifest.json | 14 ++ .../projects/docs/templates1/my-element.js | 31 +++++ .../projects/docs/tryexpressions/README.md | 16 +++ .../docs/tryexpressions/custom-element.js | 27 ++++ .../projects/docs/tryexpressions/index.html | 17 +++ .../projects/docs/tryexpressions/index.ts | 1 + .../docs/tryexpressions/manifest.json | 15 ++ docs/_includes/projects/old/clone/README.md | 93 +++++++++++++ .../projects/old/clone/custom-element.js | 36 +++++ docs/_includes/projects/old/clone/index.html | 19 +++ docs/_includes/projects/old/clone/index.js | 1 + .../projects/old/clone/manifest.json | 14 ++ docs/_includes/projects/old/declare/README.md | 36 +++++ .../projects/old/declare/custom-element.js | 20 +++ .../_includes/projects/old/declare/index.html | 21 +++ docs/_includes/projects/old/declare/index.js | 1 + .../projects/old/declare/manifest.json | 14 ++ .../_includes/projects/old/dispatch/README.md | 39 ++++++ .../projects/old/dispatch/custom-element.js | 25 ++++ .../projects/old/dispatch/index.html | 20 +++ docs/_includes/projects/old/dispatch/index.js | 1 + .../projects/old/dispatch/manifest.json | 14 ++ .../projects/old/initialize/README.md | 128 ++++++++++++++++++ .../projects/old/initialize/custom-element.js | 20 +++ .../projects/old/initialize/index.html | 21 +++ .../projects/old/initialize/index.js | 1 + .../projects/old/initialize/manifest.json | 14 ++ .../projects/old/listeners/README.md | 39 ++++++ .../projects/old/listeners/custom-element.js | 25 ++++ .../projects/old/listeners/index.html | 20 +++ .../_includes/projects/old/listeners/index.js | 1 + .../projects/old/listeners/manifest.json | 14 ++ docs/_includes/projects/old/objects/README.md | 92 +++++++++++++ .../_includes/projects/old/objects/index.html | 19 +++ docs/_includes/projects/old/objects/index.js | 1 + .../projects/old/objects/main-app.js | 19 +++ .../projects/old/objects/manifest.json | 15 ++ .../projects/old/objects/student-rec.js | 23 ++++ docs/_includes/projects/old/share/README.md | 13 ++ docs/_includes/projects/old/share/child-1.js | 29 ++++ docs/_includes/projects/old/share/child-2.js | 29 ++++ docs/_includes/projects/old/share/index.html | 18 +++ docs/_includes/projects/old/share/index.js | 1 + .../projects/old/share/manifest.json | 16 +++ .../projects/old/share/parent-element.js | 41 ++++++ docs/_includes/projects/try/create/README.md | 3 + .../projects/try/create/custom-element.js | 14 ++ docs/_includes/projects/try/create/index.html | 14 ++ docs/_includes/projects/try/create/index.ts | 1 + .../projects/try/create/manifest.json | 14 ++ docs/_includes/projects/try/events/README.md | 14 ++ .../projects/try/events/custom-element.js | 15 ++ docs/_includes/projects/try/events/index.html | 14 ++ docs/_includes/projects/try/events/index.ts | 1 + .../projects/try/events/manifest.json | 15 ++ .../projects/try/expressions/README.md | 16 +++ .../try/expressions/custom-element.js | 27 ++++ .../projects/try/expressions/index.html | 17 +++ .../projects/try/expressions/index.ts | 1 + .../projects/try/expressions/manifest.json | 15 ++ .../projects/try/properties/README.md | 3 + .../projects/try/properties/custom-element.js | 25 ++++ .../projects/try/properties/index.html | 16 +++ .../projects/try/properties/index.ts | 1 + .../projects/try/properties/manifest.json | 15 ++ docs/_includes/projects/try/style/README.md | 3 + .../projects/try/style/custom-element.js | 13 ++ docs/_includes/projects/try/style/index.html | 14 ++ docs/_includes/projects/try/style/index.ts | 1 + .../projects/try/style/manifest.json | 15 ++ 95 files changed, 1767 insertions(+) create mode 100644 docs/_includes/projects/.DS_Store create mode 100644 docs/_includes/projects/docs/annotations/custom-element.js create mode 100644 docs/_includes/projects/docs/annotations/index.html create mode 100644 docs/_includes/projects/docs/annotations/index.ts create mode 100644 docs/_includes/projects/docs/annotations/manifest.json create mode 100644 docs/_includes/projects/docs/compose/index.html create mode 100644 docs/_includes/projects/docs/compose/index.ts create mode 100644 docs/_includes/projects/docs/compose/manifest.json create mode 100644 docs/_includes/projects/docs/compose/my-app.js create mode 100644 docs/_includes/projects/docs/create/index.html create mode 100644 docs/_includes/projects/docs/create/index.ts create mode 100644 docs/_includes/projects/docs/create/manifest.json create mode 100644 docs/_includes/projects/docs/create/my-element.js create mode 100644 docs/_includes/projects/docs/renderroot/default-root.js create mode 100644 docs/_includes/projects/docs/renderroot/index.html create mode 100644 docs/_includes/projects/docs/renderroot/index.ts create mode 100644 docs/_includes/projects/docs/renderroot/light-dom.js create mode 100644 docs/_includes/projects/docs/renderroot/manifest.json create mode 100644 docs/_includes/projects/docs/templates/dom-manip.js create mode 100644 docs/_includes/projects/docs/templates/index.html create mode 100644 docs/_includes/projects/docs/templates/index.ts create mode 100644 docs/_includes/projects/docs/templates/manifest.json create mode 100644 docs/_includes/projects/docs/templates/update-properties.js create mode 100644 docs/_includes/projects/docs/templates1/index.html create mode 100644 docs/_includes/projects/docs/templates1/index.ts create mode 100644 docs/_includes/projects/docs/templates1/manifest.json create mode 100644 docs/_includes/projects/docs/templates1/my-element.js create mode 100644 docs/_includes/projects/docs/tryexpressions/README.md create mode 100644 docs/_includes/projects/docs/tryexpressions/custom-element.js create mode 100644 docs/_includes/projects/docs/tryexpressions/index.html create mode 100644 docs/_includes/projects/docs/tryexpressions/index.ts create mode 100644 docs/_includes/projects/docs/tryexpressions/manifest.json create mode 100644 docs/_includes/projects/old/clone/README.md create mode 100644 docs/_includes/projects/old/clone/custom-element.js create mode 100644 docs/_includes/projects/old/clone/index.html create mode 100644 docs/_includes/projects/old/clone/index.js create mode 100644 docs/_includes/projects/old/clone/manifest.json create mode 100644 docs/_includes/projects/old/declare/README.md create mode 100644 docs/_includes/projects/old/declare/custom-element.js create mode 100644 docs/_includes/projects/old/declare/index.html create mode 100644 docs/_includes/projects/old/declare/index.js create mode 100644 docs/_includes/projects/old/declare/manifest.json create mode 100644 docs/_includes/projects/old/dispatch/README.md create mode 100644 docs/_includes/projects/old/dispatch/custom-element.js create mode 100644 docs/_includes/projects/old/dispatch/index.html create mode 100644 docs/_includes/projects/old/dispatch/index.js create mode 100644 docs/_includes/projects/old/dispatch/manifest.json create mode 100644 docs/_includes/projects/old/initialize/README.md create mode 100644 docs/_includes/projects/old/initialize/custom-element.js create mode 100644 docs/_includes/projects/old/initialize/index.html create mode 100644 docs/_includes/projects/old/initialize/index.js create mode 100644 docs/_includes/projects/old/initialize/manifest.json create mode 100644 docs/_includes/projects/old/listeners/README.md create mode 100644 docs/_includes/projects/old/listeners/custom-element.js create mode 100644 docs/_includes/projects/old/listeners/index.html create mode 100644 docs/_includes/projects/old/listeners/index.js create mode 100644 docs/_includes/projects/old/listeners/manifest.json create mode 100644 docs/_includes/projects/old/objects/README.md create mode 100644 docs/_includes/projects/old/objects/index.html create mode 100644 docs/_includes/projects/old/objects/index.js create mode 100644 docs/_includes/projects/old/objects/main-app.js create mode 100644 docs/_includes/projects/old/objects/manifest.json create mode 100644 docs/_includes/projects/old/objects/student-rec.js create mode 100644 docs/_includes/projects/old/share/README.md create mode 100644 docs/_includes/projects/old/share/child-1.js create mode 100644 docs/_includes/projects/old/share/child-2.js create mode 100644 docs/_includes/projects/old/share/index.html create mode 100644 docs/_includes/projects/old/share/index.js create mode 100644 docs/_includes/projects/old/share/manifest.json create mode 100644 docs/_includes/projects/old/share/parent-element.js create mode 100644 docs/_includes/projects/try/create/README.md create mode 100644 docs/_includes/projects/try/create/custom-element.js create mode 100644 docs/_includes/projects/try/create/index.html create mode 100644 docs/_includes/projects/try/create/index.ts create mode 100644 docs/_includes/projects/try/create/manifest.json create mode 100644 docs/_includes/projects/try/events/README.md create mode 100644 docs/_includes/projects/try/events/custom-element.js create mode 100644 docs/_includes/projects/try/events/index.html create mode 100644 docs/_includes/projects/try/events/index.ts create mode 100644 docs/_includes/projects/try/events/manifest.json create mode 100644 docs/_includes/projects/try/expressions/README.md create mode 100644 docs/_includes/projects/try/expressions/custom-element.js create mode 100644 docs/_includes/projects/try/expressions/index.html create mode 100644 docs/_includes/projects/try/expressions/index.ts create mode 100644 docs/_includes/projects/try/expressions/manifest.json create mode 100644 docs/_includes/projects/try/properties/README.md create mode 100644 docs/_includes/projects/try/properties/custom-element.js create mode 100644 docs/_includes/projects/try/properties/index.html create mode 100644 docs/_includes/projects/try/properties/index.ts create mode 100644 docs/_includes/projects/try/properties/manifest.json create mode 100644 docs/_includes/projects/try/style/README.md create mode 100644 docs/_includes/projects/try/style/custom-element.js create mode 100644 docs/_includes/projects/try/style/index.html create mode 100644 docs/_includes/projects/try/style/index.ts create mode 100644 docs/_includes/projects/try/style/manifest.json diff --git a/docs/_includes/projects/.DS_Store b/docs/_includes/projects/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..412b6e9896f97d83357992a7595e1853c3240079 GIT binary patch literal 6148 zcmeHK%TB{U3>-raMU_yG9QPOagH_dj0Y3m~I3NXzXnW6%-)8(MN{Mpi0Cr^0#yid` zbBJRAvOab9zzV>Eu82D0_H4Dq(lKKykP4&%-wNpW zq0kj;;NWPV4h9Cjns_PEOC?4O@p9%%@M_@T=;e?YJ|s?- zm{7z{=ktrvA=NQsDv%0XDxkABZKeHxOP`tlm6MhVqym3b0ckc5n>Al9dh6shwbvH< sBmHdT8lAyfG0|EvZ?qNPjd(@Z+^>Oyqm?sn<;46EP+ihef!|Qz3*$*6h5!Hn literal 0 HcmV?d00001 diff --git a/docs/_includes/projects/docs/annotations/custom-element.js b/docs/_includes/projects/docs/annotations/custom-element.js new file mode 100644 index 00000000..2ebc4eeb --- /dev/null +++ b/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` +
Bind to a child element's text node. ${this.prop1}
+ +
Bind to a child element's attribute.
+ +

Bind to a child element's boolean attribute. + +

+ +

Bind to a child element's property. + +

+ +

+ `; + } + handlePls(e){ + var id = e.target.id; + console.log(id + '.'); + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/docs/annotations/index.html b/docs/_includes/projects/docs/annotations/index.html new file mode 100644 index 00000000..b036bb03 --- /dev/null +++ b/docs/_includes/projects/docs/annotations/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/_includes/projects/docs/annotations/index.ts b/docs/_includes/projects/docs/annotations/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/docs/annotations/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/docs/annotations/manifest.json b/docs/_includes/projects/docs/annotations/manifest.json new file mode 100644 index 00000000..9eca53a2 --- /dev/null +++ b/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" +} diff --git a/docs/_includes/projects/docs/compose/index.html b/docs/_includes/projects/docs/compose/index.html new file mode 100644 index 00000000..8779e6d2 --- /dev/null +++ b/docs/_includes/projects/docs/compose/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/docs/compose/index.ts b/docs/_includes/projects/docs/compose/index.ts new file mode 100644 index 00000000..4bc604e5 --- /dev/null +++ b/docs/_includes/projects/docs/compose/index.ts @@ -0,0 +1 @@ +import './my-app.js'; diff --git a/docs/_includes/projects/docs/compose/manifest.json b/docs/_includes/projects/docs/compose/manifest.json new file mode 100644 index 00000000..ebbc078f --- /dev/null +++ b/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" +} diff --git a/docs/_includes/projects/docs/compose/my-app.js b/docs/_includes/projects/docs/compose/my-app.js new file mode 100644 index 00000000..a6b465bf --- /dev/null +++ b/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` +
${this.headerText}
+ `; + } + static get navTemplate(){ + return html` + + `; + } + static get footerTemplate(){ + return html` +
${this.footerText}
+ `; + } + + render(){ + return html` + ${this.headerTemplate()} + ${this.navTemplate()} + ${this.footerTemplate()} + `; + } +} +customElements.define('my-app', MyApp); diff --git a/docs/_includes/projects/docs/create/index.html b/docs/_includes/projects/docs/create/index.html new file mode 100644 index 00000000..a3d38c6f --- /dev/null +++ b/docs/_includes/projects/docs/create/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/docs/create/index.ts b/docs/_includes/projects/docs/create/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/docs/create/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/docs/create/manifest.json b/docs/_includes/projects/docs/create/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/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" + } +} diff --git a/docs/_includes/projects/docs/create/my-element.js b/docs/_includes/projects/docs/create/my-element.js new file mode 100644 index 00000000..a337257a --- /dev/null +++ b/docs/_includes/projects/docs/create/my-element.js @@ -0,0 +1,27 @@ +// Import the LitElement base class and html helper function +import { LitElement, html } from '@polymer/lit-element'; + +// Extend the LitElement base class +class MyElement extends LitElement { + + /** + * Implement `render` to define a template for your element. + * + * You must provide an implementation of `render` for any element + * that uses LitElement as a base class. + */ + render(){ + /** + * `render` must return a lit-html `TemplateResult`. + * + * To create a `TemplateResult`, tag a JavaScript template literal + * with the `html` helper function: + */ + return html` + +

A paragraph

+ `; + } +} +// Register the new element with the browser. +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/docs/renderroot/default-root.js b/docs/_includes/projects/docs/renderroot/default-root.js new file mode 100644 index 00000000..7ab98752 --- /dev/null +++ b/docs/_includes/projects/docs/renderroot/default-root.js @@ -0,0 +1,14 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * This element renders its template into the default location: + * a shadowRoot created by LitElement. + */ +class DefaultRoot extends LitElement { + render(){ + return html` +

Default render root. Template renders in shadow DOM.

+ `; + } +} +customElements.define('default-root', DefaultRoot); diff --git a/docs/_includes/projects/docs/renderroot/index.html b/docs/_includes/projects/docs/renderroot/index.html new file mode 100644 index 00000000..3c646990 --- /dev/null +++ b/docs/_includes/projects/docs/renderroot/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_includes/projects/docs/renderroot/index.ts b/docs/_includes/projects/docs/renderroot/index.ts new file mode 100644 index 00000000..e4a842ca --- /dev/null +++ b/docs/_includes/projects/docs/renderroot/index.ts @@ -0,0 +1,2 @@ +import './default-root.js'; +import './light-dom.js'; diff --git a/docs/_includes/projects/docs/renderroot/light-dom.js b/docs/_includes/projects/docs/renderroot/light-dom.js new file mode 100644 index 00000000..3fc68ecf --- /dev/null +++ b/docs/_includes/projects/docs/renderroot/light-dom.js @@ -0,0 +1,22 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * This element renders its template as light DOM children. + */ +class LightDom extends LitElement { + render(){ + return html` +

Render root overridden. Template renders in light DOM.

+ `; + } + /** + * To customize an element's render root, implement createRenderRoot. Return + * the node into which to render the element's template. + * + * This element renders child nodes into its light DOM. + */ + createRenderRoot(){ + return this; + } +} +customElements.define('light-dom', LightDom); diff --git a/docs/_includes/projects/docs/renderroot/manifest.json b/docs/_includes/projects/docs/renderroot/manifest.json new file mode 100644 index 00000000..160ee6a8 --- /dev/null +++ b/docs/_includes/projects/docs/renderroot/manifest.json @@ -0,0 +1,15 @@ +{ + "files": [ + "default-root.js", + "light-dom.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" + } +} diff --git a/docs/_includes/projects/docs/templates/dom-manip.js b/docs/_includes/projects/docs/templates/dom-manip.js new file mode 100644 index 00000000..1b0b3f79 --- /dev/null +++ b/docs/_includes/projects/docs/templates/dom-manip.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * Anti-pattern. Avoid manipulating DOM. + */ +class DomManip extends LitElement { + constructor(){ + super(); + this.addEventListener('stuff-loaded', this.doSomething.bind(this)); + this.loadStuff(); + } + render(){ + return html` +

Loading

+ `; + } + doSomething(){ + this.shadowRoot.getElementById('message').innerHTML='Loading complete.'; + } + loadStuff(){ + setInterval(() => { + var loaded = new CustomEvent('stuff-loaded', { detail: {}}); + this.dispatchEvent(loaded); + }, 3000); + } +} +customElements.define('dom-manip', DomManip); diff --git a/docs/_includes/projects/docs/templates/index.html b/docs/_includes/projects/docs/templates/index.html new file mode 100644 index 00000000..a4a8a4e9 --- /dev/null +++ b/docs/_includes/projects/docs/templates/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_includes/projects/docs/templates/index.ts b/docs/_includes/projects/docs/templates/index.ts new file mode 100644 index 00000000..864cdbce --- /dev/null +++ b/docs/_includes/projects/docs/templates/index.ts @@ -0,0 +1,2 @@ +import './dom-manip.js'; +import './update-properties.js'; diff --git a/docs/_includes/projects/docs/templates/manifest.json b/docs/_includes/projects/docs/templates/manifest.json new file mode 100644 index 00000000..46a95d75 --- /dev/null +++ b/docs/_includes/projects/docs/templates/manifest.json @@ -0,0 +1,15 @@ +{ + "files": [ + "dom-manip.js", + "update-properties.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" + } +} diff --git a/docs/_includes/projects/docs/templates/update-properties.js b/docs/_includes/projects/docs/templates/update-properties.js new file mode 100644 index 00000000..2881f973 --- /dev/null +++ b/docs/_includes/projects/docs/templates/update-properties.js @@ -0,0 +1,34 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * Use this pattern instead. + */ +class UpdateProperties extends LitElement { + static get properties(){ + return { + message: String + }; + } + constructor(){ + super(); + this.message='Loading'; + this.addEventListener('stuff-loaded', this.doSomething.bind(this)); + this.loadStuff(); + } + render(){ + return html` +

${this.message}

+ `; + } + doSomething(){ + this.message='Loading complete.'; + } + loadStuff(){ + setInterval(() => { + var loaded = new CustomEvent('stuff-loaded', { detail: {}}); + this.dispatchEvent(loaded); + }, 3000); + } +} + +customElements.define('update-properties', UpdateProperties); diff --git a/docs/_includes/projects/docs/templates1/index.html b/docs/_includes/projects/docs/templates1/index.html new file mode 100644 index 00000000..934071cf --- /dev/null +++ b/docs/_includes/projects/docs/templates1/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/docs/templates1/index.ts b/docs/_includes/projects/docs/templates1/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/docs/templates1/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/docs/templates1/manifest.json b/docs/_includes/projects/docs/templates1/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_includes/projects/docs/templates1/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" + } +} diff --git a/docs/_includes/projects/docs/templates1/my-element.js b/docs/_includes/projects/docs/templates1/my-element.js new file mode 100644 index 00000000..5475bf2b --- /dev/null +++ b/docs/_includes/projects/docs/templates1/my-element.js @@ -0,0 +1,31 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + prop1: Number, + prop2: Number + }; + } + constructor(){ + super(); + this.prop1=0; + this.prop2=1; + } + render(){ + return html` +

Static paragraph.

+

prop1: ${this.prop1}

+ + + `; + } + updated(){ + console.log('Updated'); + } + changeMe(prop){ + var rand = Math.floor(Math.random()*100); + prop=='prop1'?this.prop1=rand:this.prop2=rand; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/docs/tryexpressions/README.md b/docs/_includes/projects/docs/tryexpressions/README.md new file mode 100644 index 00000000..36a075b5 --- /dev/null +++ b/docs/_includes/projects/docs/tryexpressions/README.md @@ -0,0 +1,16 @@ +## Use simple JavaScript expressions for loops and conditionals + +Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: + +```js +render(){ + return html` +
    + ${myArray.map(i => html`
  • ${i}
    • `)} +
+ ${myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; +} +``` diff --git a/docs/_includes/projects/docs/tryexpressions/custom-element.js b/docs/_includes/projects/docs/tryexpressions/custom-element.js new file mode 100644 index 00000000..a5a6b9ce --- /dev/null +++ b/docs/_includes/projects/docs/tryexpressions/custom-element.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + render(){ + return html` +
    + ${this.myArray.map(i => html`
  • ${i}
    • `)} +
+ ${this.myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/docs/tryexpressions/index.html b/docs/_includes/projects/docs/tryexpressions/index.html new file mode 100644 index 00000000..eacfc6bb --- /dev/null +++ b/docs/_includes/projects/docs/tryexpressions/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/docs/tryexpressions/index.ts b/docs/_includes/projects/docs/tryexpressions/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/docs/tryexpressions/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/docs/tryexpressions/manifest.json b/docs/_includes/projects/docs/tryexpressions/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/_includes/projects/docs/tryexpressions/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/old/clone/README.md b/docs/_includes/projects/old/clone/README.md new file mode 100644 index 00000000..9f42b1be --- /dev/null +++ b/docs/_includes/projects/old/clone/README.md @@ -0,0 +1,93 @@ +To make sure object subproperty changes are rendered, use `Object.assign()` to rewrite the whole object when any of its subproperties change. + +```js +static get properties(){ + return { + student: Object + }; +} +constructor(){ + super(); + this.student={ id: '1234' name: 'Kazi' }; +} +_render({student}){ + return html` +
+ ${student.id} + ${student.name} +
+ `; +} +changeStudent(){ + // Don't do this: + // this.student.name='Lee'; + + // Do this instead: + this.student = Object.assign({}, this.student, { + name: 'Lee' + }); +} +``` + +## Background: JavaScript objects and arrays + +Changing an object subproperty or array item without reassigning the object itself is known as **mutation**. lit-element observes changes to the object itself, not its subproperties; so when you mutate an array or object, lit-element can't detect the change, and won't re-render the template. + +For this reason, when a subproperty changes, you should implement the change by cloning the object and merging it with its updated subproperties. Use [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) to do this. + +### Use Object.assign to make sure you create true clones + +JavaScript objects are references to locations in memory. If you create a naive copy of a JavaScript object, it will point to the same memory space as the original: + +```js +var thing = { + greeting: 'hello', + entity: 'world' +}; +// naive copy +var thing1 = thing; + +// also a naive copy +var thing2 = new Object(thing); +thing2.greeting='hi'; + +// all 3 point to the same memory space +if(thing===thing1===thing2){ + console.log('literally the same'); + console.log(thing.greeting, thing1.greeting, thing2.greeting); +} +``` + +Arrays are JavaScript `Object`s, and behave the same way: + +```js +var myArray=['some','boring','test','data']; +var otherArray=myArray; +otherArray[1]='nice'; +console.log(myArray[1]); +``` + +If you perform an update by creating a naive copy of an object (for example, with `var newObject = existingObject` or `var newObject = new Object('existingObject')`) instead of a true clone, you won't rewrite the object, and `_render` will not fire. + +## Object.assign + +To clone a new object, use `Object.assign()`: + +```js +var thing = { + greeting: 'hello', + entity: 'world' +}; +var newThing = Object.assign({}, thing); +newThing.greeting='hi'; +console.log(thing.greeting); +``` + +To clone a new array, you can also use `Object.assign()`: + +```js +var myArray=['some','boring','test','data']; +var newArray = Object.assign([], ...myArray); +newArray[1]='nice'; +console.log(myArray[1]); +``` diff --git a/docs/_includes/projects/old/clone/custom-element.js b/docs/_includes/projects/old/clone/custom-element.js new file mode 100644 index 00000000..88277310 --- /dev/null +++ b/docs/_includes/projects/old/clone/custom-element.js @@ -0,0 +1,36 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myArray: Array, + myObject: Object + }; + } + constructor(){ + super(); + this.myArray = ['hello', 'we', 'are', 'test', 'data']; + this.myObject = { + prop1: 'prop 1', + prop2: 'prop 2', + prop3: 'prop 3' + }; + } + _render({myArray, myObject}){ + return html` +
    + ${myArray.map(i => html`
  • ${i}
    • `)} +
+ +
+ myObject.prop1: ${myObject.prop1}
+ myObject.prop2: ${myObject.prop2}
+ myObject.prop3: ${myObject.prop3}
+ + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/old/clone/index.html b/docs/_includes/projects/old/clone/index.html new file mode 100644 index 00000000..58154c63 --- /dev/null +++ b/docs/_includes/projects/old/clone/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/_includes/projects/old/clone/index.js b/docs/_includes/projects/old/clone/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/old/clone/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/old/clone/manifest.json b/docs/_includes/projects/old/clone/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_includes/projects/old/clone/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/declare/README.md b/docs/_includes/projects/old/declare/README.md new file mode 100644 index 00000000..3cb8a571 --- /dev/null +++ b/docs/_includes/projects/old/declare/README.md @@ -0,0 +1,36 @@ +To declare custom element properties with lit-element, add a static `properties` getter to your custom element class: + +```js +static get properties(){ + return { + myString: String, + myObject: Object + }; +} +``` + +You can supply any of the properties declared in the static `properties` getter to the element's `_render` function. Use JavaScript expressions to insert property values into an HTML template: + +```js +_render({myString, myObject}){ + return html` +

${myString}

+

myObject.prop1: ${myObject.prop1}

+

myObject.prop2: ${myObject.prop2}

+ `; +} +``` + +
+ +**You must declare a property in the `properties` getter AND supply the property name to `_render` in order to use the property value in template markup.** + +If you forget to supply the property name to `_render`, you may see something like the following error message: + +```text +ReferenceError: myString is not defined at HTMLElement.CustomElement._render +``` + +
+ +lit-element automatically observes all of the properties you declare in the static `properties` getter, and efficiently renders the changes in DOM. diff --git a/docs/_includes/projects/old/declare/custom-element.js b/docs/_includes/projects/old/declare/custom-element.js new file mode 100644 index 00000000..6b07a2d9 --- /dev/null +++ b/docs/_includes/projects/old/declare/custom-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myString: String + }; + } + constructor(){ + super(); + this.myString='initial value'; + } + _render({myString}){ + return html` +

${myString}

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/old/declare/index.html b/docs/_includes/projects/old/declare/index.html new file mode 100644 index 00000000..095c86b8 --- /dev/null +++ b/docs/_includes/projects/old/declare/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/_includes/projects/old/declare/index.js b/docs/_includes/projects/old/declare/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/old/declare/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/old/declare/manifest.json b/docs/_includes/projects/old/declare/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_includes/projects/old/declare/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/dispatch/README.md b/docs/_includes/projects/old/dispatch/README.md new file mode 100644 index 00000000..41d6ffaa --- /dev/null +++ b/docs/_includes/projects/old/dispatch/README.md @@ -0,0 +1,39 @@ + +To bind a lit-element property to the attribute of another element: + +```html + +``` + +**custom-element.js** + +```js +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} +``` + +**index.html** + +```html + + +``` diff --git a/docs/_includes/projects/old/dispatch/custom-element.js b/docs/_includes/projects/old/dispatch/custom-element.js new file mode 100644 index 00000000..163cdbc0 --- /dev/null +++ b/docs/_includes/projects/old/dispatch/custom-element.js @@ -0,0 +1,25 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/old/dispatch/index.html b/docs/_includes/projects/old/dispatch/index.html new file mode 100644 index 00000000..45459f5e --- /dev/null +++ b/docs/_includes/projects/old/dispatch/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + diff --git a/docs/_includes/projects/old/dispatch/index.js b/docs/_includes/projects/old/dispatch/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/old/dispatch/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/old/dispatch/manifest.json b/docs/_includes/projects/old/dispatch/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_includes/projects/old/dispatch/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/initialize/README.md b/docs/_includes/projects/old/initialize/README.md new file mode 100644 index 00000000..bd676225 --- /dev/null +++ b/docs/_includes/projects/old/initialize/README.md @@ -0,0 +1,128 @@ +You can initialize property values for a lit-element: + +* From the element's constructor +* From markup in an HTML document that imports the element +* From a data binding inside another lit-element +* From a script that accesses the lit-element in DOM + +## Initialize a property from a lit-element constructor + +To initialize a property from a lit-element constructor: + +
my-element.js
+ +```js +constructor(){ + super(); + this.myString='initial value'; + this.myObject= { prop1: 'stuff', prop2: 'blah' } +} +``` + +
+ +**Always initialize object and array properties in the constructor if their subproperties or items are used in an HTML template.** It's fine to initialize objects to the empty object (`{}`), and arrays to the empty array (`[]`); but they must be initialized. For example, if `myObject.prop1` and `anotherObject.myArray[x]` are used in an element template, initialize them as follows: + +```js +static get properties(){ + return { + myObject: Object; + anotherObject: Object; + } +} +constructor(){ + // myObject.prop1 is used in this template, + // so initialize myObject + this.myObject={}; + + // anotherObject.myArray[0-n] are used in this template, + // so initialize anotherObject.myArray + this.anotherObject={ + myArray: [] + }; +} +_render({myObject, anotherObject}){ + return html` +

${myObject.prop1}

+
    + ${anotherObject.myArray.map(i=>`
  • ${i}
    • `)} +
+ `; +} +``` +
+ +## Initialize a property from markup in an HTML document + +To provide a value for an element's declared `String` or `Number` property when the element is used in an HTML document, include the value as a string: + +
index.html
+ +```html + + + + +``` + +To provide a value for an element's declared `Boolean` property when the element is used in an HTML document: + +
index.html
+ +```html + + + + + + + +``` + +
+ +**Only `String`, `Number` and `Boolean` properties can be initialized by supplying strings in HTML.** For performance reasons, lit-element does not support supplying Object or Array property values via strings in HTML markup. See [] for alternatives. + +
+ +## Initialize a property from a data binding in another lit-element template + +From inside another lit-element template, you can provide values to a lit-element with data bindings using JavaScript expressions: + +```js +import {LitElement, html} from '@polymer/lit-element'; +import './my-element.js'; + +class SomeElement extends LitElement { + ... + _render({prop1, prop2}){ + return html` + + `; + } +} +customElement.define('some-element', SomeElement); +``` + +
+ +**Supplying object and array property values with JavaScript expressions is...???** + +```js +import {LitElement, html} from '@polymer/lit-element'; +import './my-element.js'; + +class SomeElement extends LitElement { + /* + * Is this okay? + */ + _render({myObject}){ + return html` + + `; + } +} +customElement.define('some-element', SomeElement); +``` + +
diff --git a/docs/_includes/projects/old/initialize/custom-element.js b/docs/_includes/projects/old/initialize/custom-element.js new file mode 100644 index 00000000..6b07a2d9 --- /dev/null +++ b/docs/_includes/projects/old/initialize/custom-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myString: String + }; + } + constructor(){ + super(); + this.myString='initial value'; + } + _render({myString}){ + return html` +

${myString}

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/old/initialize/index.html b/docs/_includes/projects/old/initialize/index.html new file mode 100644 index 00000000..095c86b8 --- /dev/null +++ b/docs/_includes/projects/old/initialize/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/_includes/projects/old/initialize/index.js b/docs/_includes/projects/old/initialize/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/old/initialize/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/old/initialize/manifest.json b/docs/_includes/projects/old/initialize/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_includes/projects/old/initialize/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/listeners/README.md b/docs/_includes/projects/old/listeners/README.md new file mode 100644 index 00000000..41d6ffaa --- /dev/null +++ b/docs/_includes/projects/old/listeners/README.md @@ -0,0 +1,39 @@ + +To bind a lit-element property to the attribute of another element: + +```html + +``` + +**custom-element.js** + +```js +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} +``` + +**index.html** + +```html + + +``` diff --git a/docs/_includes/projects/old/listeners/custom-element.js b/docs/_includes/projects/old/listeners/custom-element.js new file mode 100644 index 00000000..163cdbc0 --- /dev/null +++ b/docs/_includes/projects/old/listeners/custom-element.js @@ -0,0 +1,25 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/old/listeners/index.html b/docs/_includes/projects/old/listeners/index.html new file mode 100644 index 00000000..45459f5e --- /dev/null +++ b/docs/_includes/projects/old/listeners/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + diff --git a/docs/_includes/projects/old/listeners/index.js b/docs/_includes/projects/old/listeners/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/old/listeners/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/old/listeners/manifest.json b/docs/_includes/projects/old/listeners/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_includes/projects/old/listeners/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/objects/README.md b/docs/_includes/projects/old/objects/README.md new file mode 100644 index 00000000..144b867e --- /dev/null +++ b/docs/_includes/projects/old/objects/README.md @@ -0,0 +1,92 @@ +For performance reasons, lit-element does not support deserializing object and array properties via attributes in markup. + +Here's how we recommend you initialize array and object properties: + +## Set object properties directly instead of passing them via attributes + +Instead of passing stringified object and array properties via attributes in markup, set object and array properties directly: + +**main-app.js** + +```js +_render({}){ + return html` + + `; +} +_firstRendered(){ + const studentRec = this.shadowDom.querySelector('student-rec'); + studentRec.student={ + id: '12345', + name: 'Yasmeen' + }; +} +``` + +**student-rec.js** + +```js +properties(){ + return { + student: Object + } +} +constructor(){ + super(); + this.student = {}; +} +_render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; +} +``` + +## Use the html helper function with JavaScript expressions to initialize object properties + +You can import and use the `html` helper function to initialize array and object properties. For example: + +**main-app.js** + +```js +_getStudent(){ + return { + id: '12345', + name: 'Yasmeen' + }; +} +_render({}){ + return html` + + `; +} +``` + +**student-rec.js** + +```js +properties(){ + return { + student: Object + } +} +constructor(){ + super(); + this.student = {}; +} +_render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; +} +``` + +## Implement _deserializeValue + +If you need to deserialize properties from a string, [implement the `_deserializeValue` method](https://github.com/Polymer/lit-element/blob/2433ce376521aa8ab5272aa9c12a49ee74ac8c4e/custom_typings/polymer.d.ts#L304). diff --git a/docs/_includes/projects/old/objects/index.html b/docs/_includes/projects/old/objects/index.html new file mode 100644 index 00000000..7736e292 --- /dev/null +++ b/docs/_includes/projects/old/objects/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/_includes/projects/old/objects/index.js b/docs/_includes/projects/old/objects/index.js new file mode 100644 index 00000000..3ce9fa8f --- /dev/null +++ b/docs/_includes/projects/old/objects/index.js @@ -0,0 +1 @@ +import './main-app.js'; diff --git a/docs/_includes/projects/old/objects/main-app.js b/docs/_includes/projects/old/objects/main-app.js new file mode 100644 index 00000000..88ab3929 --- /dev/null +++ b/docs/_includes/projects/old/objects/main-app.js @@ -0,0 +1,19 @@ +import { LitElement, html } from '@polymer/lit-element'; +import './student-rec.js'; + +class MainApp extends LitElement { + _render({}){ + return html` + + `; + } + _firstRendered(){ + const studentRec = this.shadowRoot.querySelector('student-rec'); + studentRec.student={ + id: '12345', + name: 'Yasmeen' + }; + } +} + +customElements.define('main-app', MainApp); diff --git a/docs/_includes/projects/old/objects/manifest.json b/docs/_includes/projects/old/objects/manifest.json new file mode 100644 index 00000000..41800609 --- /dev/null +++ b/docs/_includes/projects/old/objects/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "main-app.js", + "student-rec.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/objects/student-rec.js b/docs/_includes/projects/old/objects/student-rec.js new file mode 100644 index 00000000..09aea9d5 --- /dev/null +++ b/docs/_includes/projects/old/objects/student-rec.js @@ -0,0 +1,23 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class StudentRec extends LitElement { + static get properties(){ + return { + student: Object + } + } + constructor(){ + super(); + this.student = {}; + } + _render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; + } +} + +customElements.define('student-rec', StudentRec); diff --git a/docs/_includes/projects/old/share/README.md b/docs/_includes/projects/old/share/README.md new file mode 100644 index 00000000..714edde7 --- /dev/null +++ b/docs/_includes/projects/old/share/README.md @@ -0,0 +1,13 @@ +This page is about sharing data upwards (from child to parent elements). For info about binding data downwards (from a parent element to a child element), see [data binding](/data/bind). + +lit-element doesn't support two-way data binding. To get the same effect, you have a few options. + +## Props down, events up + +For downwards data flow, use property bindings. + +For upwards data flow, use events. + +## State management + + diff --git a/docs/_includes/projects/old/share/child-1.js b/docs/_includes/projects/old/share/child-1.js new file mode 100644 index 00000000..933b9959 --- /dev/null +++ b/docs/_includes/projects/old/share/child-1.js @@ -0,0 +1,29 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class Child1 extends LitElement { + static get properties(){ + return { + stuff: String + }; + } + constructor(){ + super(); + this.stuff=''; + } + _render({stuff}){ + return html` +

${stuff}

+ + `; + } + +} + +customElements.define('child-1', Child1); diff --git a/docs/_includes/projects/old/share/child-2.js b/docs/_includes/projects/old/share/child-2.js new file mode 100644 index 00000000..4a4844b9 --- /dev/null +++ b/docs/_includes/projects/old/share/child-2.js @@ -0,0 +1,29 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class Child2 extends LitElement { + static get properties(){ + return { + stuff: String + }; + } + constructor(){ + super(); + this.stuff=''; + } + _render({stuff}){ + return html` +

${stuff}

+ + `; + } + +} + +customElements.define('child-2', Child2); diff --git a/docs/_includes/projects/old/share/index.html b/docs/_includes/projects/old/share/index.html new file mode 100644 index 00000000..665bd2bb --- /dev/null +++ b/docs/_includes/projects/old/share/index.html @@ -0,0 +1,18 @@ + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/_includes/projects/old/share/index.js b/docs/_includes/projects/old/share/index.js new file mode 100644 index 00000000..d9e1b247 --- /dev/null +++ b/docs/_includes/projects/old/share/index.js @@ -0,0 +1 @@ +import './parent-element.js'; diff --git a/docs/_includes/projects/old/share/manifest.json b/docs/_includes/projects/old/share/manifest.json new file mode 100644 index 00000000..dc0236c3 --- /dev/null +++ b/docs/_includes/projects/old/share/manifest.json @@ -0,0 +1,16 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "parent-element.js", + "child-1.js", + "child-2.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/share/parent-element.js b/docs/_includes/projects/old/share/parent-element.js new file mode 100644 index 00000000..b463f0bf --- /dev/null +++ b/docs/_includes/projects/old/share/parent-element.js @@ -0,0 +1,41 @@ +import { LitElement, html } from '@polymer/lit-element'; +import './child-1.js'; +import './child-2.js'; + +class ParentElement extends LitElement { + static get properties(){ + return { + data: Object + }; + } + constructor(){ + super(); + this.data = { + prop1: 'stuff', + prop2: 'more stuff' + } + } + _render({data}){ + return html` +

parent-element

+

data.prop1: ${data.prop1}

+

data.prop2: ${data.prop2}

+

child-1

+ + +

child-2

+ + + `; + } +} + +customElements.define('parent-element', ParentElement); diff --git a/docs/_includes/projects/try/create/README.md b/docs/_includes/projects/try/create/README.md new file mode 100644 index 00000000..932a89e2 --- /dev/null +++ b/docs/_includes/projects/try/create/README.md @@ -0,0 +1,3 @@ +## lit-element docs + +This is a code sample for the lit-element docs. diff --git a/docs/_includes/projects/try/create/custom-element.js b/docs/_includes/projects/try/create/custom-element.js new file mode 100644 index 00000000..cac6a6c6 --- /dev/null +++ b/docs/_includes/projects/try/create/custom-element.js @@ -0,0 +1,14 @@ +// Import and extend the LitElement base class. +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + // Return your template from lit-element's `render` function. + render(){ + return html` + +

hello world from custom-element

+ `; + } +} +// Register the new element with the browser. +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/try/create/index.html b/docs/_includes/projects/try/create/index.html new file mode 100644 index 00000000..814d63a2 --- /dev/null +++ b/docs/_includes/projects/try/create/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/try/create/index.ts b/docs/_includes/projects/try/create/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/try/create/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/try/create/manifest.json b/docs/_includes/projects/try/create/manifest.json new file mode 100644 index 00000000..bce55e53 --- /dev/null +++ b/docs/_includes/projects/try/create/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "custom-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" + } +} diff --git a/docs/_includes/projects/try/events/README.md b/docs/_includes/projects/try/events/README.md new file mode 100644 index 00000000..23e0c9e2 --- /dev/null +++ b/docs/_includes/projects/try/events/README.md @@ -0,0 +1,14 @@ +## Add event listeners in plain HTML + +Use JavaScript expressions to add event listeners in plain HTML: + +```js +render(){ + return html` + + `; +} +clickHander(event){ + console.log(event.detail); +} +``` diff --git a/docs/_includes/projects/try/events/custom-element.js b/docs/_includes/projects/try/events/custom-element.js new file mode 100644 index 00000000..c10a5737 --- /dev/null +++ b/docs/_includes/projects/try/events/custom-element.js @@ -0,0 +1,15 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + render(){ + return html` +

check the console

+ + `; + } + clickHandler(event){ + console.log(event.target.id + ' was clicked.'); + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/try/events/index.html b/docs/_includes/projects/try/events/index.html new file mode 100644 index 00000000..79284648 --- /dev/null +++ b/docs/_includes/projects/try/events/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/try/events/index.ts b/docs/_includes/projects/try/events/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/try/events/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/try/events/manifest.json b/docs/_includes/projects/try/events/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/_includes/projects/try/events/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/expressions/README.md b/docs/_includes/projects/try/expressions/README.md new file mode 100644 index 00000000..36a075b5 --- /dev/null +++ b/docs/_includes/projects/try/expressions/README.md @@ -0,0 +1,16 @@ +## Use simple JavaScript expressions for loops and conditionals + +Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: + +```js +render(){ + return html` +
    + ${myArray.map(i => html`
  • ${i}
    • `)} +
+ ${myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; +} +``` diff --git a/docs/_includes/projects/try/expressions/custom-element.js b/docs/_includes/projects/try/expressions/custom-element.js new file mode 100644 index 00000000..a5a6b9ce --- /dev/null +++ b/docs/_includes/projects/try/expressions/custom-element.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + render(){ + return html` +
    + ${this.myArray.map(i => html`
  • ${i}
    • `)} +
+ ${this.myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/try/expressions/index.html b/docs/_includes/projects/try/expressions/index.html new file mode 100644 index 00000000..eacfc6bb --- /dev/null +++ b/docs/_includes/projects/try/expressions/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/try/expressions/index.ts b/docs/_includes/projects/try/expressions/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/try/expressions/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/try/expressions/manifest.json b/docs/_includes/projects/try/expressions/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/_includes/projects/try/expressions/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/properties/README.md b/docs/_includes/projects/try/properties/README.md new file mode 100644 index 00000000..932a89e2 --- /dev/null +++ b/docs/_includes/projects/try/properties/README.md @@ -0,0 +1,3 @@ +## lit-element docs + +This is a code sample for the lit-element docs. diff --git a/docs/_includes/projects/try/properties/custom-element.js b/docs/_includes/projects/try/properties/custom-element.js new file mode 100644 index 00000000..de47c3e0 --- /dev/null +++ b/docs/_includes/projects/try/properties/custom-element.js @@ -0,0 +1,25 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + // Declare properties. + static get properties(){ + return { + headingtext: { type: String } + }; + } + constructor(){ + // Always call superconstructor when you override the constructor. + super(); + + // You can initialize properties in the element constructor. + this.headingtext='Hello World!'; + } + render(){ + return html` + +

${this.headingtext}

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/try/properties/index.html b/docs/_includes/projects/try/properties/index.html new file mode 100644 index 00000000..4fbc7716 --- /dev/null +++ b/docs/_includes/projects/try/properties/index.html @@ -0,0 +1,16 @@ + + + + + + + + + lit-element code sample + + + + + + + diff --git a/docs/_includes/projects/try/properties/index.ts b/docs/_includes/projects/try/properties/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/try/properties/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/try/properties/manifest.json b/docs/_includes/projects/try/properties/manifest.json new file mode 100644 index 00000000..d3c0108c --- /dev/null +++ b/docs/_includes/projects/try/properties/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/style/README.md b/docs/_includes/projects/try/style/README.md new file mode 100644 index 00000000..932a89e2 --- /dev/null +++ b/docs/_includes/projects/try/style/README.md @@ -0,0 +1,3 @@ +## lit-element docs + +This is a code sample for the lit-element docs. diff --git a/docs/_includes/projects/try/style/custom-element.js b/docs/_includes/projects/try/style/custom-element.js new file mode 100644 index 00000000..2b7d187f --- /dev/null +++ b/docs/_includes/projects/try/style/custom-element.js @@ -0,0 +1,13 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + render(){ + return html` + +

hello world from custom-element

+ `; + } +} +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/try/style/index.html b/docs/_includes/projects/try/style/index.html new file mode 100644 index 00000000..7377576f --- /dev/null +++ b/docs/_includes/projects/try/style/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + +

A paragraph in the main document

+ diff --git a/docs/_includes/projects/try/style/index.ts b/docs/_includes/projects/try/style/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/try/style/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/try/style/manifest.json b/docs/_includes/projects/try/style/manifest.json new file mode 100644 index 00000000..7ee1f9ca --- /dev/null +++ b/docs/_includes/projects/try/style/manifest.json @@ -0,0 +1,15 @@ +{ + "files": [ + "custom-element.js", + "index.html", + "index.ts", + "README.md" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} From f5c421982177cc5118741c26dbaf361a72a90117 Mon Sep 17 00:00:00 2001 From: Kate Jeffreys Date: Tue, 16 Oct 2018 00:30:14 -0700 Subject: [PATCH 03/52] fix config --- docs/_config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/_config.yml b/docs/_config.yml index 51142ff9..30881da5 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -5,3 +5,4 @@ markdown: kramdown kramdown: parse_block_html: true projects: projects +baseurl: lit-element From 077d593c20baee8af078fbd109401eac02e0ed31 Mon Sep 17 00:00:00 2001 From: Kate Jeffreys Date: Tue, 16 Oct 2018 22:15:14 -0700 Subject: [PATCH 04/52] moar docs --- .gitignore | 1 - docs/.DS_Store | Bin 0 -> 10244 bytes docs/_config.yml | 1 - docs/_data/site.yml | 96 +++++++ docs/_data/toc.yml | 68 ----- docs/_data/topics.yml | 28 -- docs/_includes/.DS_Store | Bin 0 -> 8196 bytes docs/_includes/article.html | 58 +--- docs/_includes/prevnext.html | 16 ++ docs/_includes/projects/.DS_Store | Bin 6148 -> 8196 bytes .../projects/docs/expressions/README.md} | 0 .../custom-element.js | 0 .../index.html | 0 .../{tryexpressions => expressions}/index.ts | 0 .../projects/docs/expressions/manifest.json | 14 + .../projects/docs/tryexpressions/README.md | 16 -- .../projects/docs/typescript/index.html | 15 + .../projects/docs/typescript/index.ts | 1 + .../projects/docs/typescript}/manifest.json | 2 +- .../projects/docs/typescript/my-element.ts | 32 +++ docs/_includes/projects/try/.DS_Store | Bin 0 -> 14340 bytes docs/_includes/projects/try/create/.DS_Store | Bin 0 -> 8196 bytes docs/_includes/projects/try/create/README.md | 3 - .../try/create/{ => after}/index.html | 2 +- .../projects/try/create/after/index.ts | 1 + .../try/create/{ => after}/manifest.json | 2 +- .../projects/try/create/after/my-element.js | 14 + .../projects/try/create/before}/index.html | 2 +- .../projects/try/create/before/index.ts | 1 + .../projects/try/create/before}/manifest.json | 2 +- .../projects/try/create/before/my-element.js | 12 + docs/_includes/projects/try/events/.DS_Store | Bin 0 -> 6148 bytes docs/_includes/projects/try/events/README.md | 14 - .../projects/try/events/after}/index.html | 2 +- .../projects/try/events/after/index.ts | 1 + .../after}/manifest.json | 2 +- .../projects/try/events/after/my-element.js | 41 +++ .../projects/try/events/before}/index.html | 2 +- .../projects/try/events/before/index.ts | 1 + .../before}/manifest.json | 2 +- .../projects/try/events/before/my-element.js | 37 +++ .../projects/try/events/custom-element.js | 15 - docs/_includes/projects/try/events/index.html | 14 - .../projects/try/expressions/.DS_Store | Bin 0 -> 8196 bytes .../projects/try/expressions/README.md | 16 -- .../try/expressions/after}/index.html | 2 +- .../projects/try/expressions/after/index.ts | 1 + .../after}/manifest.json | 2 +- .../try/expressions/after/my-element.js} | 16 +- .../try/expressions/before}/index.html | 2 +- .../projects/try/expressions/before/index.ts | 1 + .../expressions/before}/manifest.json | 2 +- .../try/expressions/before/my-element.js | 27 ++ .../projects/try/expressions/index.ts | 1 - .../projects/try/properties/.DS_Store | Bin 0 -> 8196 bytes .../projects/try/properties/README.md | 3 - .../projects/try/properties/after}/index.html | 2 +- .../projects/try/properties/after/index.ts | 1 + .../try/properties/after/manifest.json | 15 + .../try/properties/after/my-element.js | 23 ++ .../projects/try/properties/before/index.html | 15 + .../projects/try/properties/before/index.ts | 1 + .../try/properties/before}/manifest.json | 5 +- .../try/properties/before/my-element.js | 20 ++ .../projects/try/properties/custom-element.js | 25 -- .../projects/try/properties/index.ts | 1 - docs/_includes/projects/try/style/.DS_Store | Bin 0 -> 8196 bytes docs/_includes/projects/try/style/README.md | 3 - .../{properties => style/after}/index.html | 3 +- .../projects/try/style/after/index.ts | 1 + .../projects/try/style/after/manifest.json | 15 + .../projects/try/style/after/my-element.js | 50 ++++ .../projects/try/style/before/index.html | 17 ++ .../projects/try/style/before/index.ts | 1 + .../projects/try/style/before/manifest.json | 15 + .../projects/try/style/before/my-element.js | 37 +++ .../projects/try/style/custom-element.js | 13 - docs/_includes/projects/try/style/index.html | 14 - docs/_includes/projects/try/style/index.ts | 1 - .../projects/try/style/manifest.json | 15 - docs/_includes/projects/try/use/.DS_Store | Bin 0 -> 8196 bytes .../projects/try/use/after/index.html | 15 + .../_includes/projects/try/use/after/index.ts | 1 + .../projects/try/use/after/manifest.json | 14 + .../after/my-element.js} | 6 +- .../projects/try/use/before/index.html | 14 + .../projects/try/use/before/index.ts | 1 + .../projects/try/use/before/manifest.json | 14 + .../projects/try/use/before/my-element.js} | 6 +- docs/_includes/sectionnav.html | 28 ++ docs/_includes/tocnav.html | 23 +- docs/_includes/variables.html | 28 ++ docs/_layouts/default.html | 3 +- docs/_layouts/post.html | 19 +- docs/_site/about.html | 118 ++++++++ docs/_site/css/main.css | 13 + docs/_site/docs/create/design.html | 125 ++++---- docs/_site/docs/create/extend.html | 213 ++++++++++++++ docs/_site/docs/create/index.html | 189 +++--------- docs/_site/docs/create/renderroot.html | 115 +++----- docs/_site/docs/create/typescript.html | 146 +++++----- docs/_site/docs/import.html | 151 ++++------ docs/_site/docs/index.html | 95 ++---- docs/_site/docs/templates/annotations.html | 117 +++----- docs/_site/docs/templates/compose.html | 117 +++----- docs/_site/docs/templates/design.html | 117 +++----- docs/_site/docs/templates/expressions.html | 132 ++++----- docs/_site/docs/templates/index.html | 117 +++----- docs/_site/docs/templates/slots.html | 117 +++----- docs/_site/index.html | 53 ++-- .../_site/projects/docs/expressions/README.md | 0 .../docs}/expressions/custom-element.js | 0 .../projects/docs}/expressions/index.html | 0 .../projects/docs/expressions}/index.ts | 0 .../projects/docs/expressions/manifest.json | 14 + .../projects/docs/tryexpressions/README.md | 16 -- .../projects/docs/tryexpressions/index.ts | 1 - .../docs/tryexpressions/manifest.json | 15 - .../_site/projects/docs/typescript/index.html | 15 + docs/_site/projects/docs/typescript/index.ts | 1 + .../projects/docs/typescript/manifest.json | 14 + .../projects/docs/typescript/my-element.ts | 32 +++ docs/_site/projects/try/create/README.md | 3 - .../try/create/{ => after}/index.html | 2 +- docs/_site/projects/try/create/after/index.ts | 1 + .../projects/try/create/after/manifest.json | 14 + .../projects/try/create/after/my-element.js | 14 + .../projects/try/create/before/index.html | 14 + .../_site/projects/try/create/before/index.ts | 1 + .../projects/try/create/before/manifest.json | 14 + .../projects/try/create/before/my-element.js | 12 + docs/_site/projects/try/create/index.ts | 1 - docs/_site/projects/try/events/README.md | 14 - .../projects/try/events/after/index.html | 17 ++ docs/_site/projects/try/events/after/index.ts | 1 + .../projects/try/events/after/manifest.json | 14 + .../projects/try/events/after/my-element.js | 41 +++ .../projects/try/events/before/index.html | 17 ++ .../_site/projects/try/events/before/index.ts | 1 + .../projects/try/events/before/manifest.json | 14 + .../projects/try/events/before/my-element.js | 37 +++ .../projects/try/events/custom-element.js | 15 - docs/_site/projects/try/events/index.html | 14 - docs/_site/projects/try/events/index.ts | 1 - docs/_site/projects/try/events/manifest.json | 15 - docs/_site/projects/try/expressions/README.md | 16 -- .../projects/try/expressions/after/index.html | 17 ++ .../projects/try/expressions/after/index.ts | 1 + .../try/expressions/after/manifest.json | 14 + .../try/expressions/after/my-element.js} | 16 +- .../try/expressions/before/index.html | 16 ++ .../projects/try/expressions/before/index.ts | 1 + .../try/expressions/before/manifest.json | 14 + .../try/expressions/before/my-element.js | 27 ++ docs/_site/projects/try/expressions/index.ts | 1 - .../projects/try/expressions/manifest.json | 15 - docs/_site/projects/try/properties/README.md | 3 - .../projects/try/properties/after/index.html | 16 ++ .../projects/try/properties/after/index.ts | 1 + .../try/properties/after/manifest.json | 14 + .../try/properties/after/my-element.js | 23 ++ .../projects/try/properties/before/index.html | 15 + .../projects/try/properties/before/index.ts | 1 + .../try/properties/before/manifest.json | 14 + .../try/properties/before/my-element.js | 20 ++ .../projects/try/properties/custom-element.js | 25 -- docs/_site/projects/try/properties/index.ts | 1 - .../projects/try/properties/manifest.json | 15 - docs/_site/projects/try/style/README.md | 3 - .../_site/projects/try/style/after/index.html | 17 ++ docs/_site/projects/try/style/after/index.ts | 1 + .../projects/try/style/after/manifest.json | 14 + .../projects/try/style/after/my-element.js | 50 ++++ .../projects/try/style/before/index.html | 17 ++ docs/_site/projects/try/style/before/index.ts | 1 + .../projects/try/style/before/manifest.json | 14 + .../projects/try/style/before/my-element.js | 37 +++ .../projects/try/style/custom-element.js | 13 - docs/_site/projects/try/style/index.html | 14 - docs/_site/projects/try/style/index.ts | 1 - docs/_site/projects/try/use/after/index.html | 15 + docs/_site/projects/try/use/after/index.ts | 1 + .../projects/try/use/after/manifest.json | 14 + .../after/my-element.js} | 6 +- docs/_site/projects/try/use/before/index.html | 14 + docs/_site/projects/try/use/before/index.ts | 1 + .../projects/try/use/before/manifest.json | 14 + .../projects/try/use/before/my-element.js | 14 + docs/_site/styleguide.html | 53 ++-- docs/_site/tools/index.html | 69 ++--- docs/_site/tools/setup.html | 69 ++--- docs/_site/try/create.html | 226 +++++++++------ docs/_site/try/events.html | 239 ++++++++++----- docs/_site/try/expressions.html | 241 ++++++++++++---- docs/_site/try/index.html | 99 +++---- docs/_site/try/properties.html | 221 +++++++++----- docs/_site/try/style.html | 271 +++++++++++++----- docs/_site/try/use.html | 231 +++++++++++++++ docs/about.md | 6 + docs/css/main.css | 13 + docs/docs/create/design.md | 30 +- docs/docs/create/extend.md | 29 ++ docs/docs/create/index.md | 37 +-- docs/docs/create/renderroot.md | 8 +- docs/docs/create/typescript.md | 15 +- docs/docs/import.md | 67 +++-- docs/docs/index.md | 5 +- docs/docs/templates/annotations.md | 8 +- docs/docs/templates/compose.md | 8 +- docs/docs/templates/design.md | 8 +- docs/docs/templates/expressions.md | 35 ++- docs/docs/templates/index.md | 8 +- docs/docs/templates/slots.md | 8 +- docs/index.md | 2 +- docs/projects/.DS_Store | Bin 6148 -> 8196 bytes docs/projects/docs/expressions/README.md | 0 .../docs/expressions}/custom-element.js | 0 .../docs/expressions}/index.html | 0 .../docs/expressions}/index.ts | 0 docs/projects/docs/expressions/manifest.json | 14 + docs/projects/docs/tryexpressions/README.md | 16 -- docs/projects/docs/tryexpressions/index.ts | 1 - .../docs/tryexpressions/manifest.json | 15 - docs/projects/docs/typescript/index.html | 15 + docs/projects/docs/typescript/index.ts | 1 + docs/projects/docs/typescript/manifest.json | 14 + docs/projects/docs/typescript/my-element.ts | 32 +++ docs/projects/try/.DS_Store | Bin 0 -> 14340 bytes docs/projects/try/create/.DS_Store | Bin 0 -> 8196 bytes docs/projects/try/create/README.md | 3 - docs/projects/try/create/after/index.html | 14 + docs/projects/try/create/after/index.ts | 1 + docs/projects/try/create/after/manifest.json | 14 + docs/projects/try/create/after/my-element.js | 14 + docs/projects/try/create/before/index.html | 14 + docs/projects/try/create/before/index.ts | 1 + docs/projects/try/create/before/manifest.json | 14 + docs/projects/try/create/before/my-element.js | 12 + docs/projects/try/create/index.ts | 1 - docs/projects/try/events/.DS_Store | Bin 0 -> 6148 bytes docs/projects/try/events/README.md | 14 - docs/projects/try/events/after/index.html | 17 ++ docs/projects/try/events/after/index.ts | 1 + docs/projects/try/events/after/manifest.json | 14 + docs/projects/try/events/after/my-element.js | 41 +++ docs/projects/try/events/before/index.html | 17 ++ docs/projects/try/events/before/index.ts | 1 + docs/projects/try/events/before/manifest.json | 14 + docs/projects/try/events/before/my-element.js | 37 +++ docs/projects/try/events/custom-element.js | 15 - docs/projects/try/events/index.html | 14 - docs/projects/try/events/index.ts | 1 - docs/projects/try/events/manifest.json | 15 - docs/projects/try/expressions/.DS_Store | Bin 0 -> 8196 bytes docs/projects/try/expressions/README.md | 16 -- .../projects/try/expressions/after/index.html | 17 ++ docs/projects/try/expressions/after/index.ts | 1 + .../try/expressions/after/manifest.json | 14 + .../try/expressions/after/my-element.js} | 16 +- .../try/expressions/before/index.html | 16 ++ docs/projects/try/expressions/before/index.ts | 1 + .../try/expressions/before/manifest.json | 14 + .../try/expressions/before/my-element.js | 27 ++ docs/projects/try/expressions/index.ts | 1 - docs/projects/try/expressions/manifest.json | 15 - docs/projects/try/properties/.DS_Store | Bin 0 -> 8196 bytes docs/projects/try/properties/README.md | 3 - docs/projects/try/properties/after/index.html | 16 ++ docs/projects/try/properties/after/index.ts | 1 + .../try/properties/after/manifest.json | 14 + .../try/properties/after/my-element.js | 23 ++ .../projects/try/properties/before/index.html | 15 + docs/projects/try/properties/before/index.ts | 1 + .../try/properties/before/manifest.json | 14 + .../try/properties/before/my-element.js | 20 ++ .../projects/try/properties/custom-element.js | 25 -- docs/projects/try/properties/index.ts | 1 - docs/projects/try/properties/manifest.json | 15 - docs/projects/try/style/.DS_Store | Bin 0 -> 8196 bytes docs/projects/try/style/README.md | 3 - docs/projects/try/style/after/index.html | 17 ++ docs/projects/try/style/after/index.ts | 1 + docs/projects/try/style/after/manifest.json | 14 + docs/projects/try/style/after/my-element.js | 50 ++++ docs/projects/try/style/before/index.html | 17 ++ docs/projects/try/style/before/index.ts | 1 + docs/projects/try/style/before/manifest.json | 14 + docs/projects/try/style/before/my-element.js | 37 +++ docs/projects/try/style/custom-element.js | 13 - docs/projects/try/style/index.html | 14 - docs/projects/try/style/index.ts | 1 - docs/projects/try/style/manifest.json | 15 - docs/projects/try/use/.DS_Store | Bin 0 -> 8196 bytes docs/projects/try/use/after/index.html | 15 + docs/projects/try/use/after/index.ts | 1 + docs/projects/try/use/after/manifest.json | 14 + docs/projects/try/use/after/my-element.js | 14 + docs/projects/try/use/before/index.html | 14 + docs/projects/try/use/before/index.ts | 1 + docs/projects/try/use/before/manifest.json | 14 + docs/projects/try/use/before/my-element.js | 14 + docs/styleguide.md | 2 +- docs/tools/index.md | 5 +- docs/tools/setup.md | 5 +- docs/try/create.md | 101 +++++-- docs/try/events.md | 98 ++++--- docs/try/expressions.md | 103 ++++++- docs/try/index.md | 17 +- docs/try/properties.md | 124 +++++--- docs/try/style.md | 107 +++++-- docs/try/use.md | 64 +++++ 311 files changed, 4907 insertions(+), 2615 deletions(-) create mode 100644 docs/.DS_Store create mode 100644 docs/_data/site.yml delete mode 100644 docs/_data/toc.yml delete mode 100644 docs/_data/topics.yml create mode 100644 docs/_includes/.DS_Store create mode 100644 docs/_includes/prevnext.html rename docs/{_site/try/use.md => _includes/projects/docs/expressions/README.md} (100%) rename docs/_includes/projects/docs/{tryexpressions => expressions}/custom-element.js (100%) rename docs/_includes/projects/docs/{tryexpressions => expressions}/index.html (100%) rename docs/_includes/projects/docs/{tryexpressions => expressions}/index.ts (100%) create mode 100644 docs/_includes/projects/docs/expressions/manifest.json delete mode 100644 docs/_includes/projects/docs/tryexpressions/README.md create mode 100644 docs/_includes/projects/docs/typescript/index.html create mode 100644 docs/_includes/projects/docs/typescript/index.ts rename docs/{projects/try/create => _includes/projects/docs/typescript}/manifest.json (91%) create mode 100644 docs/_includes/projects/docs/typescript/my-element.ts create mode 100644 docs/_includes/projects/try/.DS_Store create mode 100644 docs/_includes/projects/try/create/.DS_Store delete mode 100644 docs/_includes/projects/try/create/README.md rename docs/_includes/projects/try/create/{ => after}/index.html (92%) create mode 100644 docs/_includes/projects/try/create/after/index.ts rename docs/_includes/projects/try/create/{ => after}/manifest.json (91%) create mode 100644 docs/_includes/projects/try/create/after/my-element.js rename docs/{projects/try/create => _includes/projects/try/create/before}/index.html (92%) create mode 100644 docs/_includes/projects/try/create/before/index.ts rename docs/{_site/projects/try/create => _includes/projects/try/create/before}/manifest.json (91%) create mode 100644 docs/_includes/projects/try/create/before/my-element.js create mode 100644 docs/_includes/projects/try/events/.DS_Store delete mode 100644 docs/_includes/projects/try/events/README.md rename docs/{_site/projects/try/expressions => _includes/projects/try/events/after}/index.html (92%) create mode 100644 docs/_includes/projects/try/events/after/index.ts rename docs/_includes/projects/try/{expressions => events/after}/manifest.json (92%) create mode 100644 docs/_includes/projects/try/events/after/my-element.js rename docs/{projects/try/expressions => _includes/projects/try/events/before}/index.html (92%) create mode 100644 docs/_includes/projects/try/events/before/index.ts rename docs/_includes/projects/try/{properties => events/before}/manifest.json (92%) create mode 100644 docs/_includes/projects/try/events/before/my-element.js delete mode 100644 docs/_includes/projects/try/events/custom-element.js delete mode 100644 docs/_includes/projects/try/events/index.html create mode 100644 docs/_includes/projects/try/expressions/.DS_Store delete mode 100644 docs/_includes/projects/try/expressions/README.md rename docs/{projects/docs/tryexpressions => _includes/projects/try/expressions/after}/index.html (92%) create mode 100644 docs/_includes/projects/try/expressions/after/index.ts rename docs/_includes/projects/try/{events => expressions/after}/manifest.json (92%) rename docs/{projects/try/expressions/custom-element.js => _includes/projects/try/expressions/after/my-element.js} (58%) rename docs/{_site/projects/try/properties => _includes/projects/try/expressions/before}/index.html (92%) create mode 100644 docs/_includes/projects/try/expressions/before/index.ts rename docs/_includes/projects/{docs/tryexpressions => try/expressions/before}/manifest.json (92%) create mode 100644 docs/_includes/projects/try/expressions/before/my-element.js delete mode 100644 docs/_includes/projects/try/expressions/index.ts create mode 100644 docs/_includes/projects/try/properties/.DS_Store delete mode 100644 docs/_includes/projects/try/properties/README.md rename docs/{projects/try/properties => _includes/projects/try/properties/after}/index.html (92%) create mode 100644 docs/_includes/projects/try/properties/after/index.ts create mode 100644 docs/_includes/projects/try/properties/after/manifest.json create mode 100644 docs/_includes/projects/try/properties/after/my-element.js create mode 100644 docs/_includes/projects/try/properties/before/index.html create mode 100644 docs/_includes/projects/try/properties/before/index.ts rename docs/{_site/projects/try/style => _includes/projects/try/properties/before}/manifest.json (81%) create mode 100644 docs/_includes/projects/try/properties/before/my-element.js delete mode 100644 docs/_includes/projects/try/properties/custom-element.js delete mode 100644 docs/_includes/projects/try/properties/index.ts create mode 100644 docs/_includes/projects/try/style/.DS_Store delete mode 100644 docs/_includes/projects/try/style/README.md rename docs/_includes/projects/try/{properties => style/after}/index.html (92%) create mode 100644 docs/_includes/projects/try/style/after/index.ts create mode 100644 docs/_includes/projects/try/style/after/manifest.json create mode 100644 docs/_includes/projects/try/style/after/my-element.js create mode 100644 docs/_includes/projects/try/style/before/index.html create mode 100644 docs/_includes/projects/try/style/before/index.ts create mode 100644 docs/_includes/projects/try/style/before/manifest.json create mode 100644 docs/_includes/projects/try/style/before/my-element.js delete mode 100644 docs/_includes/projects/try/style/custom-element.js delete mode 100644 docs/_includes/projects/try/style/index.html delete mode 100644 docs/_includes/projects/try/style/index.ts delete mode 100644 docs/_includes/projects/try/style/manifest.json create mode 100644 docs/_includes/projects/try/use/.DS_Store create mode 100644 docs/_includes/projects/try/use/after/index.html create mode 100644 docs/_includes/projects/try/use/after/index.ts create mode 100644 docs/_includes/projects/try/use/after/manifest.json rename docs/_includes/projects/try/{create/custom-element.js => use/after/my-element.js} (69%) create mode 100644 docs/_includes/projects/try/use/before/index.html create mode 100644 docs/_includes/projects/try/use/before/index.ts create mode 100644 docs/_includes/projects/try/use/before/manifest.json rename docs/{projects/try/create/custom-element.js => _includes/projects/try/use/before/my-element.js} (69%) create mode 100644 docs/_includes/sectionnav.html create mode 100644 docs/_includes/variables.html create mode 100644 docs/_site/about.html create mode 100644 docs/_site/docs/create/extend.html create mode 100644 docs/_site/projects/docs/expressions/README.md rename docs/{_includes/projects/try => _site/projects/docs}/expressions/custom-element.js (100%) rename docs/{_includes/projects/try => _site/projects/docs}/expressions/index.html (100%) rename docs/{_includes/projects/try/create => _site/projects/docs/expressions}/index.ts (100%) create mode 100644 docs/_site/projects/docs/expressions/manifest.json delete mode 100644 docs/_site/projects/docs/tryexpressions/README.md delete mode 100644 docs/_site/projects/docs/tryexpressions/index.ts delete mode 100644 docs/_site/projects/docs/tryexpressions/manifest.json create mode 100644 docs/_site/projects/docs/typescript/index.html create mode 100644 docs/_site/projects/docs/typescript/index.ts create mode 100644 docs/_site/projects/docs/typescript/manifest.json create mode 100644 docs/_site/projects/docs/typescript/my-element.ts delete mode 100644 docs/_site/projects/try/create/README.md rename docs/_site/projects/try/create/{ => after}/index.html (92%) create mode 100644 docs/_site/projects/try/create/after/index.ts create mode 100644 docs/_site/projects/try/create/after/manifest.json create mode 100644 docs/_site/projects/try/create/after/my-element.js create mode 100644 docs/_site/projects/try/create/before/index.html create mode 100644 docs/_site/projects/try/create/before/index.ts create mode 100644 docs/_site/projects/try/create/before/manifest.json create mode 100644 docs/_site/projects/try/create/before/my-element.js delete mode 100644 docs/_site/projects/try/create/index.ts delete mode 100644 docs/_site/projects/try/events/README.md create mode 100644 docs/_site/projects/try/events/after/index.html create mode 100644 docs/_site/projects/try/events/after/index.ts create mode 100644 docs/_site/projects/try/events/after/manifest.json create mode 100644 docs/_site/projects/try/events/after/my-element.js create mode 100644 docs/_site/projects/try/events/before/index.html create mode 100644 docs/_site/projects/try/events/before/index.ts create mode 100644 docs/_site/projects/try/events/before/manifest.json create mode 100644 docs/_site/projects/try/events/before/my-element.js delete mode 100644 docs/_site/projects/try/events/custom-element.js delete mode 100644 docs/_site/projects/try/events/index.html delete mode 100644 docs/_site/projects/try/events/index.ts delete mode 100644 docs/_site/projects/try/events/manifest.json delete mode 100644 docs/_site/projects/try/expressions/README.md create mode 100644 docs/_site/projects/try/expressions/after/index.html create mode 100644 docs/_site/projects/try/expressions/after/index.ts create mode 100644 docs/_site/projects/try/expressions/after/manifest.json rename docs/{projects/docs/tryexpressions/custom-element.js => _site/projects/try/expressions/after/my-element.js} (58%) create mode 100644 docs/_site/projects/try/expressions/before/index.html create mode 100644 docs/_site/projects/try/expressions/before/index.ts create mode 100644 docs/_site/projects/try/expressions/before/manifest.json create mode 100644 docs/_site/projects/try/expressions/before/my-element.js delete mode 100644 docs/_site/projects/try/expressions/index.ts delete mode 100644 docs/_site/projects/try/expressions/manifest.json delete mode 100644 docs/_site/projects/try/properties/README.md create mode 100644 docs/_site/projects/try/properties/after/index.html create mode 100644 docs/_site/projects/try/properties/after/index.ts create mode 100644 docs/_site/projects/try/properties/after/manifest.json create mode 100644 docs/_site/projects/try/properties/after/my-element.js create mode 100644 docs/_site/projects/try/properties/before/index.html create mode 100644 docs/_site/projects/try/properties/before/index.ts create mode 100644 docs/_site/projects/try/properties/before/manifest.json create mode 100644 docs/_site/projects/try/properties/before/my-element.js delete mode 100644 docs/_site/projects/try/properties/custom-element.js delete mode 100644 docs/_site/projects/try/properties/index.ts delete mode 100644 docs/_site/projects/try/properties/manifest.json delete mode 100644 docs/_site/projects/try/style/README.md create mode 100644 docs/_site/projects/try/style/after/index.html create mode 100644 docs/_site/projects/try/style/after/index.ts create mode 100644 docs/_site/projects/try/style/after/manifest.json create mode 100644 docs/_site/projects/try/style/after/my-element.js create mode 100644 docs/_site/projects/try/style/before/index.html create mode 100644 docs/_site/projects/try/style/before/index.ts create mode 100644 docs/_site/projects/try/style/before/manifest.json create mode 100644 docs/_site/projects/try/style/before/my-element.js delete mode 100644 docs/_site/projects/try/style/custom-element.js delete mode 100644 docs/_site/projects/try/style/index.html delete mode 100644 docs/_site/projects/try/style/index.ts create mode 100644 docs/_site/projects/try/use/after/index.html create mode 100644 docs/_site/projects/try/use/after/index.ts create mode 100644 docs/_site/projects/try/use/after/manifest.json rename docs/_site/projects/try/{create/custom-element.js => use/after/my-element.js} (69%) create mode 100644 docs/_site/projects/try/use/before/index.html create mode 100644 docs/_site/projects/try/use/before/index.ts create mode 100644 docs/_site/projects/try/use/before/manifest.json create mode 100644 docs/_site/projects/try/use/before/my-element.js create mode 100644 docs/_site/try/use.html create mode 100644 docs/about.md create mode 100644 docs/docs/create/extend.md create mode 100644 docs/projects/docs/expressions/README.md rename docs/{_site/projects/docs/tryexpressions => projects/docs/expressions}/custom-element.js (100%) rename docs/{_site/projects/docs/tryexpressions => projects/docs/expressions}/index.html (100%) rename docs/{_includes/projects/try/events => projects/docs/expressions}/index.ts (100%) create mode 100644 docs/projects/docs/expressions/manifest.json delete mode 100644 docs/projects/docs/tryexpressions/README.md delete mode 100644 docs/projects/docs/tryexpressions/index.ts delete mode 100644 docs/projects/docs/tryexpressions/manifest.json create mode 100644 docs/projects/docs/typescript/index.html create mode 100644 docs/projects/docs/typescript/index.ts create mode 100644 docs/projects/docs/typescript/manifest.json create mode 100644 docs/projects/docs/typescript/my-element.ts create mode 100644 docs/projects/try/.DS_Store create mode 100644 docs/projects/try/create/.DS_Store delete mode 100644 docs/projects/try/create/README.md create mode 100644 docs/projects/try/create/after/index.html create mode 100644 docs/projects/try/create/after/index.ts create mode 100644 docs/projects/try/create/after/manifest.json create mode 100644 docs/projects/try/create/after/my-element.js create mode 100644 docs/projects/try/create/before/index.html create mode 100644 docs/projects/try/create/before/index.ts create mode 100644 docs/projects/try/create/before/manifest.json create mode 100644 docs/projects/try/create/before/my-element.js delete mode 100644 docs/projects/try/create/index.ts create mode 100644 docs/projects/try/events/.DS_Store delete mode 100644 docs/projects/try/events/README.md create mode 100644 docs/projects/try/events/after/index.html create mode 100644 docs/projects/try/events/after/index.ts create mode 100644 docs/projects/try/events/after/manifest.json create mode 100644 docs/projects/try/events/after/my-element.js create mode 100644 docs/projects/try/events/before/index.html create mode 100644 docs/projects/try/events/before/index.ts create mode 100644 docs/projects/try/events/before/manifest.json create mode 100644 docs/projects/try/events/before/my-element.js delete mode 100644 docs/projects/try/events/custom-element.js delete mode 100644 docs/projects/try/events/index.html delete mode 100644 docs/projects/try/events/index.ts delete mode 100644 docs/projects/try/events/manifest.json create mode 100644 docs/projects/try/expressions/.DS_Store delete mode 100644 docs/projects/try/expressions/README.md create mode 100644 docs/projects/try/expressions/after/index.html create mode 100644 docs/projects/try/expressions/after/index.ts create mode 100644 docs/projects/try/expressions/after/manifest.json rename docs/{_site/projects/try/expressions/custom-element.js => projects/try/expressions/after/my-element.js} (58%) create mode 100644 docs/projects/try/expressions/before/index.html create mode 100644 docs/projects/try/expressions/before/index.ts create mode 100644 docs/projects/try/expressions/before/manifest.json create mode 100644 docs/projects/try/expressions/before/my-element.js delete mode 100644 docs/projects/try/expressions/index.ts delete mode 100644 docs/projects/try/expressions/manifest.json create mode 100644 docs/projects/try/properties/.DS_Store delete mode 100644 docs/projects/try/properties/README.md create mode 100644 docs/projects/try/properties/after/index.html create mode 100644 docs/projects/try/properties/after/index.ts create mode 100644 docs/projects/try/properties/after/manifest.json create mode 100644 docs/projects/try/properties/after/my-element.js create mode 100644 docs/projects/try/properties/before/index.html create mode 100644 docs/projects/try/properties/before/index.ts create mode 100644 docs/projects/try/properties/before/manifest.json create mode 100644 docs/projects/try/properties/before/my-element.js delete mode 100644 docs/projects/try/properties/custom-element.js delete mode 100644 docs/projects/try/properties/index.ts delete mode 100644 docs/projects/try/properties/manifest.json create mode 100644 docs/projects/try/style/.DS_Store delete mode 100644 docs/projects/try/style/README.md create mode 100644 docs/projects/try/style/after/index.html create mode 100644 docs/projects/try/style/after/index.ts create mode 100644 docs/projects/try/style/after/manifest.json create mode 100644 docs/projects/try/style/after/my-element.js create mode 100644 docs/projects/try/style/before/index.html create mode 100644 docs/projects/try/style/before/index.ts create mode 100644 docs/projects/try/style/before/manifest.json create mode 100644 docs/projects/try/style/before/my-element.js delete mode 100644 docs/projects/try/style/custom-element.js delete mode 100644 docs/projects/try/style/index.html delete mode 100644 docs/projects/try/style/index.ts delete mode 100644 docs/projects/try/style/manifest.json create mode 100644 docs/projects/try/use/.DS_Store create mode 100644 docs/projects/try/use/after/index.html create mode 100644 docs/projects/try/use/after/index.ts create mode 100644 docs/projects/try/use/after/manifest.json create mode 100644 docs/projects/try/use/after/my-element.js create mode 100644 docs/projects/try/use/before/index.html create mode 100644 docs/projects/try/use/before/index.ts create mode 100644 docs/projects/try/use/before/manifest.json create mode 100644 docs/projects/try/use/before/my-element.js diff --git a/.gitignore b/.gitignore index 32f0856e..ce346dd8 100644 --- a/.gitignore +++ b/.gitignore @@ -20,4 +20,3 @@ lit-element.d.ts docs/node_modules docs/build -docs/_includes/projects diff --git a/docs/.DS_Store b/docs/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..2d4ed675f7ad221e97bd5597243feef641d8156f GIT binary patch literal 10244 zcmeHMYitx%6h5c4Fn4)$ie_c6SCC-OiMq-4>|T zs{90u_(~wYjYdF!7%|ZpH2zSc#wQ7&(I5Cq^oRb`#Mim^&Tf|N7B!K8W+s_?X70IX z?wvE=J>R`&005iQS{*;V#x1`TwuV|_zfyA`en zTo1S&a6RC9!1ch@-~r-nekh}*bW7I*t_NHXWIe#+Ly%4`!;T!3QiKjF#1?>LF;$C$ zu4x}2Y=VvqJ91D;VM@=Gy9abk(b;04G$(zKHzyf(3YERz)%nHy*q;l7+^v?cmHnp#1dAFwC~1x5{8|stv!oHBZ^B#j#3y?*jRQ; z`!1`mJrzx*?dE85E5BPGP3?*~*BzFX$X-Wdn+&}#qL#NjJJw*u5>%6-CL6E6!zI;Ti31D_`k}sN;L- z4cGOg49m1P=}DVpL@l++E34y{xjw0LeP`TCq`OT!qL#&@iFi5@P3cXEM7yz1x4TmM zo)o{@Vq3{ni)h$okS(u^sA}5QH|S(w^y;l-W~<1KkD1`VwtCvE`UOjx&Ws&bs(QwI z$~$`v+lVFfjeUle+O;`q$8}RP%$-}vsb|UO#_xS zGdv-t+N|St`oglSIi5O2)!4>FG^QtH)jZF9MZJ-A_DZkG%0|y(r3^!?D{ggn)3|NX z^U`Hr@2$M&HBmdYu17a%RHvzXKHg>;)n=}1(lkCMr8+!K0-!ovD=!$4OeM@FN?8Tl zC{5J^d*J{ag8SeoJOd}-C3qd)fz$9FybmA4XYe_E0bjy*@Duz7e;^>D2fbK>#z$q<5t{;8g`?JyD^FVxE~+Dhwx#11fRfTcpOjQ z3-}7YAqQ5Jf$VB|pDFQ8x+;uGXL=TO7Q$p;MS0s5!sPie9EfG(uPL7}se0#gur`X_n<8wphUo_v^R;IEG2@KMfGR`|SuU|_OB zKvCtbrzXG{p;_u`0y7jvEjq&=8=4jHs3Qo&Ox)Jhdje_+!Br8r^A~tLYBAwiY8Njd z?MOnd)P|c#3w&m=e+0d!;5fWSu=^Cw5!k+h9|&&05Zp?zl%Q6LRT#iYI2ET6*knA&~VdMOmQ)ZBo9>hd|6r|ijqt-vC79T3Lb)*c-#qA z`Fy#N#4(ss<6|PIh^fsRPM^UfEs5#OYi7@3J{fbwgy&Ur=P_R<_K11TD;G90UpAu2 z7{jZVF7x^F;+vo*u4|@I{RK6td;?SoAy@`&u!TTwLLYI{L1L#P@HD&#FT*K#o0#bX z_z*sV^Kb#ahHv0o_z`}E-vv7{oFLdKNW8?u#dNGEUgDu*F@=g7a1E}-o3K-ai5LZn z1g3Eh?!|o+91c@Z;Oz7`KJT#8Njyb}qazz43UN~*L|%fK*l0hkmZn}2L|#Np(?WIg z7l*T-G4I1&gsogS{T*UrfeZ!ZV_XuJSk|bc1f%$a{tPj3`e8MGT0xyuRFv8p|I92k zvDyAwzPeIJNZnl4z!y?#iMVA8*&@EuQj4W_DO=9hRO(2nZDy@v&8I>EY8n=JPr@;H zl|c6ioTY`(1^Ax8_A@PmMxrW!=EsS|P1h6HrV}@Xuz|Q~ApwrVO)iFRcDSh%w>#Xl z11*P}(s-xCP5ben!%ZB7kLAIx5Hk&dT^=vVN4TZy0oMb=dtiiA1$q8|#qj_Chkt;p zaXsLA;6LvHEN*RYZKl`AWFhk3i09gabZ)1UAH3b5l){7x-h|hSbUfYgbi7EvP@R)~ n5&E#xZcs{LPIkhaq|D}D_MZXn{@>mIU!D2sAuHR^`aELK^ZG#>@x*Bcz8+QUa_rikD;A1c_}A6Q(Vo|-&0iSY1m^J z_X$r=-s09&lyFgvMw6?7Y#moa~KN!qeF0bk$Pp{Y1?(E}LjSF9w zX^J%|4XMVE3#owGkZOxCQOKYce*Ye&Q%pvV&eAjVEImiB&>M7t-lY%ebGk@h(3fc3|MjF$|;S78P zcodK037o^zcoDB+5pUsbyo2}g5kAHz_!M8^Yb=H9D~YxOIuWfmGWdZH*1|RyVLQ1N zwu!zwwWI$Hw%=_PtX5WCx1+kQp|SZuduP|>+qvQ{UWt?BCj>--vkZp3jaLyVs5W+8 zuO&v9FKd3~ld#OXzFCl@EE!BmBAKXHm>E4f-J95_FxYyDyw;6P2~96$hE;jm(yAr& za>iAWr?(u`G`);@4!yT`uy+%a8+s2PVK0d%PL(rhdlRbqFDN`ui}V3~#{6BPZ|Fz* znSQ0en7ndSFnI=cBY`^XLnE57AI-Q8?Gb~0xC{L_#vBggB*rj~31ne0g)^{`X9|m$ z!#p0tS!VG`JcZ}+0`vG1Uc-63zJk8~74%(Li@xGe-gP{8ntjXEUL6*n#R_b+0;S=E zwIcuTTmSq2MlUO#FIFH{U;`CES?^G9H&3|U)+BQ6B-hhiMG@l`LMubK5ko}3Ovl+? g{=<-ulaVhK*@e)uhs%b42 - {% assign parent = site.data.toc.toc | where:"url", page.parent %} - - {% if parent[0].url %} - - {{parent[0].title}} - - {%endif%} + -
+

{{topic.title}}

-{% assign topic = site.data.topics.topics | where:"url", page.topic %} - -{% if topic[0] %} - -

{{topic[0].title}}

-In this topic: +{% if topic.toc %} -
- -

{{page.title}}

- - - -{% else %} - -

{{page.title}}

- -
- -{% endif %} - +

{{subtopic.title}}

+{%endif%} {{ content }} -
- - {% if page.prev %} - << {{page.prevtitle}} - {% endif %} - - - {% if page.next %} - {{page.nexttitle}} >> - {% endif %} - -
- diff --git a/docs/_includes/prevnext.html b/docs/_includes/prevnext.html new file mode 100644 index 00000000..01bdc942 --- /dev/null +++ b/docs/_includes/prevnext.html @@ -0,0 +1,16 @@ +
+ + + + + + +
\ No newline at end of file diff --git a/docs/_includes/projects/.DS_Store b/docs/_includes/projects/.DS_Store index 412b6e9896f97d83357992a7595e1853c3240079..21b6dd736ad956de0de6a5348028d294429891ce 100644 GIT binary patch literal 8196 zcmeHLTTC2P82vA0qFuQTh}6iP*9*;q@}uC3sD0p_kwO`cg8Ytc4oUXyObh| zm&c~Ydtzf^jL}5ui-|rM6OAu6>Wh)Ys?ir8eDK9rAB_IzoLNetJeU|I>730u|2h9< z{&T+hX3m}g0PM@^tpHU3AW>yf-ABzW3bV7it%Q6HGa|)q zfWUSH*ke-&2{6G1ee?OfB(DSwJo;tGB>`FL8Q^Yql({MeX|TBK7IOiQT}mvv>4fDZ zDBYKdv}L+pOUri{Dkv=4vsaR3NiLQj8DDS~$34x|}bPcv;J!-GxTAeZ@R)7G8EJ|}DIF2ByWFz`fiwR(BEt);su+SYd8N>g;X zwWZ@&Q?#SKdu2tID(hNLj+{*`U0i-*<;m9tUg*DbpmYmjt#xpK>tarwBGG0G-oG~eu>Ef!Ib&b;o1(-QwfWllA<+c3>4&GVY z(A?J5)4N_=QmQKDO2u@}bj^fiOfH(bw=k=@NyFAn``j4<&-Tp6Od}(g;pg&%t)&be z6|M|dOKPn&lTDcCv!=JSu9lP*AF2r}^EzdE*wI;(u6`)V+!Cz`hv%53KVwjt z-KiSxpff#8zRA^^z6X( - ${myArray.map(i => html`
  • ${i}
    • `)} - - ${myBool? - html`

    Render some HTML if myBool is true

    `: - html`

    Render some other HTML if myBool is false

    `} - `; -} -``` diff --git a/docs/_includes/projects/docs/typescript/index.html b/docs/_includes/projects/docs/typescript/index.html new file mode 100644 index 00000000..af6b024d --- /dev/null +++ b/docs/_includes/projects/docs/typescript/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/docs/typescript/index.ts b/docs/_includes/projects/docs/typescript/index.ts new file mode 100644 index 00000000..40cbb8d8 --- /dev/null +++ b/docs/_includes/projects/docs/typescript/index.ts @@ -0,0 +1 @@ +import './my-element.ts'; diff --git a/docs/projects/try/create/manifest.json b/docs/_includes/projects/docs/typescript/manifest.json similarity index 91% rename from docs/projects/try/create/manifest.json rename to docs/_includes/projects/docs/typescript/manifest.json index bce55e53..1a862572 100644 --- a/docs/projects/try/create/manifest.json +++ b/docs/_includes/projects/docs/typescript/manifest.json @@ -1,6 +1,6 @@ { "files": [ - "custom-element.js", + "my-element.ts", "index.html", "index.ts" ], diff --git a/docs/_includes/projects/docs/typescript/my-element.ts b/docs/_includes/projects/docs/typescript/my-element.ts new file mode 100644 index 00000000..5ade03b1 --- /dev/null +++ b/docs/_includes/projects/docs/typescript/my-element.ts @@ -0,0 +1,32 @@ +/** + * Import LitElement base class, html helper function, + * and TypeScript decorators + **/ +import { + LitElement, html, customElement, property +} from '@polymer/lit-element'; + +/** + * Use the customElement decorator to define your class as + * a custom element. Registers as an HTML tag. + */ +@customElement('my-element') +export class MyElement extends LitElement { + + /** + * Create an observed property. Triggers update on change. + */ + @property() + foo = 'foo'; + + /** + * Implement `render` to define a template for your element. + */ + render(){ + /** + * Use JavaScript expressions to include property values in + * the element template. + */ + return html`

    ${this.foo}

    `; + } +} diff --git a/docs/_includes/projects/try/.DS_Store b/docs/_includes/projects/try/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..eb37db09997ebc3d6bb3a688fc63f0263db5930c GIT binary patch literal 14340 zcmeHOYit}>6+XwY-I;M5kAt($B;I6+aUEPISv$_dtrOPI#BGYB*omD-%$>Q9nS0NkbHDSQdkp~CmrZm4gaJUJlcnl%fJy}*M5+5=Hm4LYPD14dD8Kf{-RFM;bx0u|I5X1|qmDrC87kNxUkC9Pb4ESZV{R6G)! zP8wDw9DWxomQ_|&-z3ROjW&F{vTssdnKSg6k?D+)GOa^;+M;w)t+P(0W`^S_bAMWA z<>T>GGCO5jlWKiDnv7?Y(Tv`kOpY4&>efU?Kb>KBN32vj)6XkTs%qBK59n0S$ms)A z+nO-wb*!3-@`dHAf*WqWCA{s{&kQWouBcP%S1QU8BcYoa<8DJwADl4~nNx?OR$Mm| zhIw*4XIMrosgIe_DZL(FmgR*&sVN$##lIZs)wJX6%lo2M zW@K77saJ2(=W82R2L`EEhgn%~BEkA3HAglI1>|Con*zlPt!@8Jdf5&jsT!RPU1 zd<9>{*YFqk4lao9RWLPW$DJa{U-3Oh7EIjbWT9R)SzLslz>6e{H{oX_kLyepB$aB2 zlNsv}B?#8Ze5Y;mJziwKRM{4)RFfB{pZXH;CE!cImH?X{LUgh;VyE*WY;mFfGMVn%vXioVdR-Mv_oz9C?GzS#T0qrlN%}|hk zo!W(Xb-;*7{i`nlUjoGvU|heP?_b_|Am2YYIHc_TXngo2b4O3F z;}aLS!fv0OJK@61=H7SSyXL;I$E|17KwGm`2_7UTT|Zq&4Dy6Qy@|Qw(t<|rWiS-n zAd%y(+K(;4R*BewTEXA->9(MvE+ZnqS%DDeqQ7efQh|-z^*dZdQlWIeM%FIL!Q&028 zL?)@qv2oIY)J$J0YbGrIo>5UC(XSv+s@m*qXSlmP)Y-Xnu01r{5#F}7J+!T>du~pa z8e2Mc4WF1gbMNeZb681<5syN2$f_eblSc)Y~E5auMr3<6_;#O!N2f9+~Z*$!z~kW($a@V1P64PZIO~6tQ9Sw zF%J>rrF1bk*f8`F>7oZBT6vhL97K3#ezziB5-@=S3J_r#WC;^)Tr{x9 z=SBiM%Y_2hePH(TQGoPVU3y@a&9?52 zWncD#k&DWjhl%1aq|YSSs>FxSBp5dA+U;P&b7D`|R zWmH3qmJIHu)jwJ~aHEZ9HQ|OOU7k^v9lj5_i)*1iAXmJGkO-yuGuEQqJIatgl`tSI$L=DUjpww|7V&_IxbWjO78C|l$O1Bw{+unx7^)( zTPQU(#NQZ=KZ%Lx3;I^n#KgoHpYV^UF(EeoCHkN*J{pZCKIxg6Z9{MAgAXbRJITzM znRCv}nQyguIG74DhPXuNh0|JWK2Kpq&&}AVjFct z2t)`(2t)`(2t)|n8VJyt&6Bdsxi7U*86glMa9bk4_lG!TE|a00ky30ORER48$wKND ziRyF@5I*rxCPO(RrEsM&^Zzw2cC%?Eb z2TV#Cl@S6F0!tC#clRPNU<3lN7T@2CAw^vy;6Vng)Pz5ta=a9of0`P1Y(GdOzQ%$T zg+;|H6;)N#HR`FJQE#FrFoLY#W@JwC)=?uEO@;Md`Yf9KR?r!GuC{IXmxhI$ghLg@ZMqsr%PLF-w z^7{j8GT^lV-^&E;!f=?etZzMNk)55hI>_4Zw`n+T#!#JIy*^fX*Y-r?-g`Ud)~qdI zTA8-4FK7F9%CU}3*k&+#!tm3UYufIa0Rqwu>=E0_sHJ#S?RAYYYi>h%1=Ba`o0juZ zSe4SBP1$F&c5rTvtu0xzd5f+MniR@m&*Y<->>WiFnyM|jev)h2GZvMmqR60X^ld6L zlwO~rmOVSPohtLy-iPREiypl}+pREDJ?0oG%aL78TC>6qseL(#rtECd_A8}WtM;e8 zu`ybYFJ?}*>iQ6$x!drABjc7!QC*|yS$V~VPKxRT*R`4^k4dRY)<`l41k|czBIJew zI@Hmja{va3{o`;Eo`z@OS-1qR!xeZN-iJ@%8hi$y!*%!$euSUlSNIKnhdG8y>=Ld;pJNFP_37JdFmP!Ero`J_dLJAH~P;Nqh=lz*le< z-@rHVEqoWR;s^L4euQ7(mpCWmE12i<;V|A%;P+I?r)>Df77X2tva!zlv;+SSWxrj` zd0JX_$GY{Kt7>*MG_|xYJj%Q$cq5ercO*FkY34~G9^oQ3az^VL@6=+)h+EcV{#!85 zbGDMRNSV`#A+dO@QX#&uuvs13st~DJff(!VZ843lApWYNS+`S*u_B_XBAUB)YZ@yg zE=%p6X3`cDYo&JIe$oPe+f*@=Rvn`a^Pe;DGR(qz@G)`kI(!8`z)$cC{7I}U!V+Sg zj+-!sn{g}F;5OWjJMbQC3i;QG_hT0xBo6lCaqPzvIDl!ih=HSMV}=-*!wHIV_sJt^RDDGFV~ZC9nU>O{qt;H>=LzZ2?SQiC@T2<{9 literal 0 HcmV?d00001 diff --git a/docs/_includes/projects/try/create/README.md b/docs/_includes/projects/try/create/README.md deleted file mode 100644 index 932a89e2..00000000 --- a/docs/_includes/projects/try/create/README.md +++ /dev/null @@ -1,3 +0,0 @@ -## lit-element docs - -This is a code sample for the lit-element docs. diff --git a/docs/_includes/projects/try/create/index.html b/docs/_includes/projects/try/create/after/index.html similarity index 92% rename from docs/_includes/projects/try/create/index.html rename to docs/_includes/projects/try/create/after/index.html index 814d63a2..a097c2fe 100644 --- a/docs/_includes/projects/try/create/index.html +++ b/docs/_includes/projects/try/create/after/index.html @@ -9,6 +9,6 @@ lit-element code sample - + diff --git a/docs/_includes/projects/try/create/after/index.ts b/docs/_includes/projects/try/create/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/create/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/create/manifest.json b/docs/_includes/projects/try/create/after/manifest.json similarity index 91% rename from docs/_includes/projects/try/create/manifest.json rename to docs/_includes/projects/try/create/after/manifest.json index bce55e53..567adb1e 100644 --- a/docs/_includes/projects/try/create/manifest.json +++ b/docs/_includes/projects/try/create/after/manifest.json @@ -1,6 +1,6 @@ { "files": [ - "custom-element.js", + "my-element.js", "index.html", "index.ts" ], diff --git a/docs/_includes/projects/try/create/after/my-element.js b/docs/_includes/projects/try/create/after/my-element.js new file mode 100644 index 00000000..e0bcdebc --- /dev/null +++ b/docs/_includes/projects/try/create/after/my-element.js @@ -0,0 +1,14 @@ +// Import LitElement base class and html helper function +import { LitElement, html } from '@polymer/lit-element'; + +// Create your class here +class MyElement extends LitElement { + render(){ + // Define your element template here + return html` +

    Hello world! From my-element

    + `; + } +} +// Register the element with the browser +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/create/index.html b/docs/_includes/projects/try/create/before/index.html similarity index 92% rename from docs/projects/try/create/index.html rename to docs/_includes/projects/try/create/before/index.html index 814d63a2..a097c2fe 100644 --- a/docs/projects/try/create/index.html +++ b/docs/_includes/projects/try/create/before/index.html @@ -9,6 +9,6 @@ lit-element code sample - + diff --git a/docs/_includes/projects/try/create/before/index.ts b/docs/_includes/projects/try/create/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/create/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/create/manifest.json b/docs/_includes/projects/try/create/before/manifest.json similarity index 91% rename from docs/_site/projects/try/create/manifest.json rename to docs/_includes/projects/try/create/before/manifest.json index bce55e53..567adb1e 100644 --- a/docs/_site/projects/try/create/manifest.json +++ b/docs/_includes/projects/try/create/before/manifest.json @@ -1,6 +1,6 @@ { "files": [ - "custom-element.js", + "my-element.js", "index.html", "index.ts" ], diff --git a/docs/_includes/projects/try/create/before/my-element.js b/docs/_includes/projects/try/create/before/my-element.js new file mode 100644 index 00000000..f575ebfa --- /dev/null +++ b/docs/_includes/projects/try/create/before/my-element.js @@ -0,0 +1,12 @@ +// Import LitElement base class and html helper function +import { } from ''; + +// Create your class here +class MyElement { + render(){ + // Define your element template here + } +} + +// Register the element with the browser +customElements.define(); diff --git a/docs/_includes/projects/try/events/.DS_Store b/docs/_includes/projects/try/events/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..7c47070b6c731473e015ea0445f3bbb70b01cca0 GIT binary patch literal 6148 zcmeHKyG{c!5S)d8BGIIz^e^xSrzrV?`~ZX`Riu*w^jGD(_%vo8&FO>)1r3>%)?=@C zY%@)a7bi?W=SO`)vCp?q%+Q0~zv=(SB(0=?6!=#P*le{~E%~IXt&_)jt!?yYy61e--8c^lhbYIy jD92oQIev_!%xga9epfgo2A%Ps6ZJFTy2zx!Un}qhNLm_; literal 0 HcmV?d00001 diff --git a/docs/_includes/projects/try/events/README.md b/docs/_includes/projects/try/events/README.md deleted file mode 100644 index 23e0c9e2..00000000 --- a/docs/_includes/projects/try/events/README.md +++ /dev/null @@ -1,14 +0,0 @@ -## Add event listeners in plain HTML - -Use JavaScript expressions to add event listeners in plain HTML: - -```js -render(){ - return html` - - `; -} -clickHander(event){ - console.log(event.detail); -} -``` diff --git a/docs/_site/projects/try/expressions/index.html b/docs/_includes/projects/try/events/after/index.html similarity index 92% rename from docs/_site/projects/try/expressions/index.html rename to docs/_includes/projects/try/events/after/index.html index eacfc6bb..205b902b 100644 --- a/docs/_site/projects/try/expressions/index.html +++ b/docs/_includes/projects/try/events/after/index.html @@ -11,7 +11,7 @@ - + diff --git a/docs/_includes/projects/try/events/after/index.ts b/docs/_includes/projects/try/events/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/events/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/expressions/manifest.json b/docs/_includes/projects/try/events/after/manifest.json similarity index 92% rename from docs/_includes/projects/try/expressions/manifest.json rename to docs/_includes/projects/try/events/after/manifest.json index d3c0108c..2bbc09a0 100644 --- a/docs/_includes/projects/try/expressions/manifest.json +++ b/docs/_includes/projects/try/events/after/manifest.json @@ -2,7 +2,7 @@ "title": "lit-element code sample", "description": "lit-element code sample", "files": [ - "custom-element.js", + "my-element.js", "index.html", "index.ts", "README.md" diff --git a/docs/_includes/projects/try/events/after/my-element.js b/docs/_includes/projects/try/events/after/my-element.js new file mode 100644 index 00000000..c97d83c9 --- /dev/null +++ b/docs/_includes/projects/try/events/after/my-element.js @@ -0,0 +1,41 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + + this.message='Hello world! From my-element'; + + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` +

    ${this.message}

    + +
      + ${this.myArray.map(i => html`
    • ${i}
      • `)} +
    + ${this.myBool? + html`

    Render some HTML if myBool is true

    `: + html`

    Render some other HTML if myBool is false

    `} + + + + `; + } + // Add an event handler here. + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/expressions/index.html b/docs/_includes/projects/try/events/before/index.html similarity index 92% rename from docs/projects/try/expressions/index.html rename to docs/_includes/projects/try/events/before/index.html index eacfc6bb..205b902b 100644 --- a/docs/projects/try/expressions/index.html +++ b/docs/_includes/projects/try/events/before/index.html @@ -11,7 +11,7 @@ - + diff --git a/docs/_includes/projects/try/events/before/index.ts b/docs/_includes/projects/try/events/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/events/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/properties/manifest.json b/docs/_includes/projects/try/events/before/manifest.json similarity index 92% rename from docs/_includes/projects/try/properties/manifest.json rename to docs/_includes/projects/try/events/before/manifest.json index d3c0108c..2bbc09a0 100644 --- a/docs/_includes/projects/try/properties/manifest.json +++ b/docs/_includes/projects/try/events/before/manifest.json @@ -2,7 +2,7 @@ "title": "lit-element code sample", "description": "lit-element code sample", "files": [ - "custom-element.js", + "my-element.js", "index.html", "index.ts", "README.md" diff --git a/docs/_includes/projects/try/events/before/my-element.js b/docs/_includes/projects/try/events/before/my-element.js new file mode 100644 index 00000000..15655133 --- /dev/null +++ b/docs/_includes/projects/try/events/before/my-element.js @@ -0,0 +1,37 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + + this.message='Hello world! From my-element'; + + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` +

    ${this.message}

    + +
      + ${this.myArray.map(i => html`
    • ${i}
      • `)} +
    + ${this.myBool? + html`

    Render some HTML if myBool is true

    `: + html`

    Render some other HTML if myBool is false

    `} + + + + `; + } + // Add an event handler here. +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/events/custom-element.js b/docs/_includes/projects/try/events/custom-element.js deleted file mode 100644 index c10a5737..00000000 --- a/docs/_includes/projects/try/events/custom-element.js +++ /dev/null @@ -1,15 +0,0 @@ -import { LitElement, html } from '@polymer/lit-element'; - -class CustomElement extends LitElement { - render(){ - return html` -

    check the console

    - - `; - } - clickHandler(event){ - console.log(event.target.id + ' was clicked.'); - } -} - -customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/try/events/index.html b/docs/_includes/projects/try/events/index.html deleted file mode 100644 index 79284648..00000000 --- a/docs/_includes/projects/try/events/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - lit-element code sample - - - - - diff --git a/docs/_includes/projects/try/expressions/.DS_Store b/docs/_includes/projects/try/expressions/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..55526b2f1782d6f32e5f85e503814a0604e2e883 GIT binary patch literal 8196 zcmeHLOKjXk82Wt(xy%NVzWs@3oR|(q)8u;c-Ky2;kB2w zH;;yt@HkSCcpZuWA%qYO7Y;ojBvf&Ls$39?6e__50SAP{l>-9)@i<{Ok8%T4JkrcJ zJOBUBj6Z+&>~8?TL|$(NPys-pDv+SAjLo#PWGs9CyWO;BTYE1=fty)1&9TG{F4N``(?rRy<|K z(QjhSjxL+I98$EE5pW;}Mrz#6rYt8#b6!tnEz|W{TIR8&v}{fJT7@x%ZD5ZkN1gGc zr+Ildq2om!T+R-dw(g84oV=~O z{ya%(@E025byHJqEuFDwTU*C;EIQTN(!L`WZQt2BJW3%fwMee9?y0>ljzOK0q8!I@gV$}mK9Sw9lO;o^8(@F^wFn#7|kDt!0ckzOiCMO|7a9=2PYqdDENZ^@`$;Zr-A@ zvpVhYsH2N0onKLyZ;5VE)ic7xBd>t8S~_bbEbMtaaDk_~I>Ga?^@*RVXE2KT;sRa2A9i#Y#f0 zi)?0FSCe=@NzIs0gkJdCIo~@Pxl7BuaH`K`CMJCTGN$ajDvWp*b1^+RdjE|W%!5$_Z7^; zwuPT} zk!we(4pS9H_{~W4L#Xl7aY8>GCk)bY-#1FGA|@W-j6@ot@{fNA2+x0FeerK+c>do! K|GZ_-|33kri(NGU literal 0 HcmV?d00001 diff --git a/docs/_includes/projects/try/expressions/README.md b/docs/_includes/projects/try/expressions/README.md deleted file mode 100644 index 36a075b5..00000000 --- a/docs/_includes/projects/try/expressions/README.md +++ /dev/null @@ -1,16 +0,0 @@ -## Use simple JavaScript expressions for loops and conditionals - -Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: - -```js -render(){ - return html` -
      - ${myArray.map(i => html`
    • ${i}
      • `)} -
    - ${myBool? - html`

    Render some HTML if myBool is true

    `: - html`

    Render some other HTML if myBool is false

    `} - `; -} -``` diff --git a/docs/projects/docs/tryexpressions/index.html b/docs/_includes/projects/try/expressions/after/index.html similarity index 92% rename from docs/projects/docs/tryexpressions/index.html rename to docs/_includes/projects/try/expressions/after/index.html index eacfc6bb..205b902b 100644 --- a/docs/projects/docs/tryexpressions/index.html +++ b/docs/_includes/projects/try/expressions/after/index.html @@ -11,7 +11,7 @@ - + diff --git a/docs/_includes/projects/try/expressions/after/index.ts b/docs/_includes/projects/try/expressions/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/expressions/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/events/manifest.json b/docs/_includes/projects/try/expressions/after/manifest.json similarity index 92% rename from docs/_includes/projects/try/events/manifest.json rename to docs/_includes/projects/try/expressions/after/manifest.json index d3c0108c..2bbc09a0 100644 --- a/docs/_includes/projects/try/events/manifest.json +++ b/docs/_includes/projects/try/expressions/after/manifest.json @@ -2,7 +2,7 @@ "title": "lit-element code sample", "description": "lit-element code sample", "files": [ - "custom-element.js", + "my-element.js", "index.html", "index.ts", "README.md" diff --git a/docs/projects/try/expressions/custom-element.js b/docs/_includes/projects/try/expressions/after/my-element.js similarity index 58% rename from docs/projects/try/expressions/custom-element.js rename to docs/_includes/projects/try/expressions/after/my-element.js index a5a6b9ce..d1b89ecb 100644 --- a/docs/projects/try/expressions/custom-element.js +++ b/docs/_includes/projects/try/expressions/after/my-element.js @@ -1,19 +1,28 @@ -import { LitElement, html } from '@polymer/lit-element'; +import { LitElement, html } from '@polymer/lit-element'; -class CustomElement extends LitElement { +class MyElement extends LitElement { static get properties(){ return { + message: { type: String }, myArray: { type: Array }, myBool: { type: Boolean } }; } constructor(){ super(); + + this.message='Hello world! From my-element'; + + // Initialize myArray and myBool here. this.myArray = ['an','array','of','test','data']; this.myBool = true; } + render(){ return html` +

    ${this.message}

    + +
      ${this.myArray.map(i => html`
    • ${i}
      • `)}
    @@ -23,5 +32,4 @@ class CustomElement extends LitElement { `; } } - -customElements.define('custom-element', CustomElement); +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/try/properties/index.html b/docs/_includes/projects/try/expressions/before/index.html similarity index 92% rename from docs/_site/projects/try/properties/index.html rename to docs/_includes/projects/try/expressions/before/index.html index 4fbc7716..cf412668 100644 --- a/docs/_site/projects/try/properties/index.html +++ b/docs/_includes/projects/try/expressions/before/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/_includes/projects/try/expressions/before/index.ts b/docs/_includes/projects/try/expressions/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/expressions/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/docs/tryexpressions/manifest.json b/docs/_includes/projects/try/expressions/before/manifest.json similarity index 92% rename from docs/_includes/projects/docs/tryexpressions/manifest.json rename to docs/_includes/projects/try/expressions/before/manifest.json index d3c0108c..2bbc09a0 100644 --- a/docs/_includes/projects/docs/tryexpressions/manifest.json +++ b/docs/_includes/projects/try/expressions/before/manifest.json @@ -2,7 +2,7 @@ "title": "lit-element code sample", "description": "lit-element code sample", "files": [ - "custom-element.js", + "my-element.js", "index.html", "index.ts", "README.md" diff --git a/docs/_includes/projects/try/expressions/before/my-element.js b/docs/_includes/projects/try/expressions/before/my-element.js new file mode 100644 index 00000000..ba5ab840 --- /dev/null +++ b/docs/_includes/projects/try/expressions/before/my-element.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + + // Initialize myArray and myBool here. + + } + + render(){ + return html` +

    ${this.message}

    + + + `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/expressions/index.ts b/docs/_includes/projects/try/expressions/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/_includes/projects/try/expressions/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/_includes/projects/try/properties/.DS_Store b/docs/_includes/projects/try/properties/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c9844b7500978084a707d2c19e6d3c5b4c383696 GIT binary patch literal 8196 zcmeHMTWl0n82V?7B+2=0;OyV2qgu#H>6N(!)|GT(q(pMXh)|r%gpQ+ zMUpD<8iVnYn25e0>O)Zz6BA>6;-VxP6Jq0qL?86U2Oo?^5}))xGgH#-MPp(LCUcTG z|2gNsoWI}s&YV3{0Kk@Y&QI0+1}G zVXsh|?g5@pG?4K?j{4GbrI`Nh0RvYIt{CXMlRnDLNyY;?>Pz1p(02z6X2#%#g5K=p z7xl~m4qNKqXtP7pBF~33rE(lBut7_YIN7ver77mkbk@)vHx~N_i{=%V%wHggQmI&4 zR$6*AF=UM-T*b{fEsC9DD-*h^r4_qZSKXncX0{tzUNgJwPQ}&iBiuMi-zdnyZ!778 zx;BzxOIj_{RdiFcy?B0%{$AZwt&tWhXR3~89|ZT>-HJOzafIslgHaD0Q4mv1K6R?0 zK2{rTXxM(bHhQW)wsmuDbnBMJ)2BsIkk{@$Fpzuv?5pQ4y!qDKm#=tkfWdnWD*XPf z`YN>w5SjSI!Yv9EGb~b}-pRN6P!_#16O?ktUa2$17Uv0!uB@wDrgKoU9g-nC!$`|vm`D_^u~wJi0kl*)cf z<eaG*glk%DjcQd8{G@8+^&(S*q(fQzBO9enB6Gy#Lqrm9L~f9_2uu}w z3?;1@{?In5QDFPT-n@^dKiDMg5-PA(?4x}(On;B#%^Yu*S>t zdF8Tp%IXl;HLEJmiAY!D)5JqStd7V0E*+&Z)X~AY2l{CzW#J4w2WR1VI0qNtBD@bD z!>4c!K7-HUI^2LC;3xPMeuLlPCj5y4F2&_oi85AU9d5!HHsTI!!kyTH`>+!qz%ESU zQ5?WysNf)G@dP^P;-mNkK8erZv-lFehGX~+zKieShj3#}3>} z98BUt?88HN7&E951BXyYn;4kK5j=^H;ThuLQ}{H#fG-jkU&hz*Jial7c^y-jcX2B7 z3eL3sJ?p0HC!K0D=>O?l%O`Bpu*^Yp00<|1hL>G| - + diff --git a/docs/_includes/projects/try/properties/after/index.ts b/docs/_includes/projects/try/properties/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/properties/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/properties/after/manifest.json b/docs/_includes/projects/try/properties/after/manifest.json new file mode 100644 index 00000000..2bbc09a0 --- /dev/null +++ b/docs/_includes/projects/try/properties/after/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/properties/after/my-element.js b/docs/_includes/projects/try/properties/after/my-element.js new file mode 100644 index 00000000..2d847bec --- /dev/null +++ b/docs/_includes/projects/try/properties/after/my-element.js @@ -0,0 +1,23 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + // Declare property here. + message: { type: String } + }; + } + constructor(){ + super(); + // Initialize property here. + this.message='Hello world! From my-element'; + } + + render(){ + return html` + +

    ${this.message}

    + `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/properties/before/index.html b/docs/_includes/projects/try/properties/before/index.html new file mode 100644 index 00000000..1a1c0a6e --- /dev/null +++ b/docs/_includes/projects/try/properties/before/index.html @@ -0,0 +1,15 @@ + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_includes/projects/try/properties/before/index.ts b/docs/_includes/projects/try/properties/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/properties/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/style/manifest.json b/docs/_includes/projects/try/properties/before/manifest.json similarity index 81% rename from docs/_site/projects/try/style/manifest.json rename to docs/_includes/projects/try/properties/before/manifest.json index 7ee1f9ca..567adb1e 100644 --- a/docs/_site/projects/try/style/manifest.json +++ b/docs/_includes/projects/try/properties/before/manifest.json @@ -1,9 +1,8 @@ { "files": [ - "custom-element.js", + "my-element.js", "index.html", - "index.ts", - "README.md" + "index.ts" ], "title": "lit-element code sample", "description": "lit-element code sample", diff --git a/docs/_includes/projects/try/properties/before/my-element.js b/docs/_includes/projects/try/properties/before/my-element.js new file mode 100644 index 00000000..60713723 --- /dev/null +++ b/docs/_includes/projects/try/properties/before/my-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + // Declare property here. + }; + } + constructor(){ + super(); + // Initialize property here. + } + render(){ + return html` + +

    + `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/properties/custom-element.js b/docs/_includes/projects/try/properties/custom-element.js deleted file mode 100644 index de47c3e0..00000000 --- a/docs/_includes/projects/try/properties/custom-element.js +++ /dev/null @@ -1,25 +0,0 @@ -import { LitElement, html } from '@polymer/lit-element'; - -class CustomElement extends LitElement { - // Declare properties. - static get properties(){ - return { - headingtext: { type: String } - }; - } - constructor(){ - // Always call superconstructor when you override the constructor. - super(); - - // You can initialize properties in the element constructor. - this.headingtext='Hello World!'; - } - render(){ - return html` - -

    ${this.headingtext}

    - `; - } -} - -customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/try/properties/index.ts b/docs/_includes/projects/try/properties/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/_includes/projects/try/properties/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/_includes/projects/try/style/.DS_Store b/docs/_includes/projects/try/style/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..446b727a2358e4aebfe10167dfb3d62e721cf60f GIT binary patch literal 8196 zcmeHMTWl0n82JvNO8{ zN=*&%8l&-&n0R?X-#|@FOpNgf74Z@iVk2sz5BlPR4@RSjPx_xZ(`L69jET`k=OpL+ z=bZoi=lt`{ch1>=767n4r#App1As)COSY7XITF|NJS&w1Ju65e*#l&CH)SOq$C@=Z z>AA#flIMsn26BrPXNbAFV}Sf=a6VmGj4QEA!YC6X*l@^blP zV#FCuc$$}U+qLX*-a4##BgvrNL!Tq2>ss=tX^alARUMA)X{K#tePdHMXvm3P)7G8Q zb|+`+u0KygDEx&6m^wDr7;CAIHa6}YuaAy3#G1C(N1JxEjE~Dw)y9V1-Gk|~=f=*D z-~YV834^l=$_sGg)fXriJ!Ro%lOn|&z!&S?e20LiZ1<>KzDSktaMJ13W~C}+w_WmRw9 zbj_q?92qrrZ=_#yQ--aZ_V6(R+V;#L)5yvdct!59wX`w0x~iI~Yt*&#SxKx$>dPg~ z(>c>SJIPj*FJHG_RZi&S%0Wlxv+3+jN%l20>s9qQ*K}kJDs@Q`PSvV)GSj3Um%J7| zTa;}wbLF1baDu5+KHns}`si;sX@6OV}|U5_ekrOR+H zoS@y2feY|BJONJ$73+}>J+>PzH9}nO?cnEv&B%Z=S)NmLxcp6>w@H{?<58u@t}!8@=y;9nQsjorA9IM{;k=5^0t-sPFhE4rtyRt?YA7u-~H=>P1l$|th6<=A}QsohZQ(gJHO z68=>4_`hrZ@Ba(T>(HGLfe?Ye69FvkOmw!>jPspZJl2j<9;D0@A2%VSZ$bqh!u$Pj noaFQ$hE$IRx_BTbgd`26fBZwhO@6Y5_kVc*PsOqS_51%1yv}=n literal 0 HcmV?d00001 diff --git a/docs/_includes/projects/try/style/README.md b/docs/_includes/projects/try/style/README.md deleted file mode 100644 index 932a89e2..00000000 --- a/docs/_includes/projects/try/style/README.md +++ /dev/null @@ -1,3 +0,0 @@ -## lit-element docs - -This is a code sample for the lit-element docs. diff --git a/docs/_includes/projects/try/properties/index.html b/docs/_includes/projects/try/style/after/index.html similarity index 92% rename from docs/_includes/projects/try/properties/index.html rename to docs/_includes/projects/try/style/after/index.html index 4fbc7716..205b902b 100644 --- a/docs/_includes/projects/try/properties/index.html +++ b/docs/_includes/projects/try/style/after/index.html @@ -7,10 +7,11 @@ lit-element code sample + - + diff --git a/docs/_includes/projects/try/style/after/index.ts b/docs/_includes/projects/try/style/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/style/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/style/after/manifest.json b/docs/_includes/projects/try/style/after/manifest.json new file mode 100644 index 00000000..2bbc09a0 --- /dev/null +++ b/docs/_includes/projects/try/style/after/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/style/after/my-element.js b/docs/_includes/projects/try/style/after/my-element.js new file mode 100644 index 00000000..ffdff733 --- /dev/null +++ b/docs/_includes/projects/try/style/after/my-element.js @@ -0,0 +1,50 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` + + + +

    ${this.message}

    + +
      ${this.myArray.map(i => html`
    • ${i}
      • `)}
    + + +

    style me

    + + + `; + } + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/style/before/index.html b/docs/_includes/projects/try/style/before/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_includes/projects/try/style/before/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/try/style/before/index.ts b/docs/_includes/projects/try/style/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/style/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/style/before/manifest.json b/docs/_includes/projects/try/style/before/manifest.json new file mode 100644 index 00000000..2bbc09a0 --- /dev/null +++ b/docs/_includes/projects/try/style/before/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/style/before/my-element.js b/docs/_includes/projects/try/style/before/my-element.js new file mode 100644 index 00000000..c1dfee26 --- /dev/null +++ b/docs/_includes/projects/try/style/before/my-element.js @@ -0,0 +1,37 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` + + +

    ${this.message}

    + +
      ${this.myArray.map(i => html`
    • ${i}
      • `)}
    + + +

    style me

    + + + `; + } + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/style/custom-element.js b/docs/_includes/projects/try/style/custom-element.js deleted file mode 100644 index 2b7d187f..00000000 --- a/docs/_includes/projects/try/style/custom-element.js +++ /dev/null @@ -1,13 +0,0 @@ -import { LitElement, html } from '@polymer/lit-element'; - -class CustomElement extends LitElement { - render(){ - return html` - -

    hello world from custom-element

    - `; - } -} -customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/try/style/index.html b/docs/_includes/projects/try/style/index.html deleted file mode 100644 index 7377576f..00000000 --- a/docs/_includes/projects/try/style/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - lit-element code sample - - - -

    A paragraph in the main document

    - diff --git a/docs/_includes/projects/try/style/index.ts b/docs/_includes/projects/try/style/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/_includes/projects/try/style/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/_includes/projects/try/style/manifest.json b/docs/_includes/projects/try/style/manifest.json deleted file mode 100644 index 7ee1f9ca..00000000 --- a/docs/_includes/projects/try/style/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "files": [ - "custom-element.js", - "index.html", - "index.ts", - "README.md" - ], - "title": "lit-element code sample", - "description": "lit-element code sample", - "template": "typescript", - "dependencies": { - "@polymer/lit-element": "latest", - "@webcomponents/webcomponentsjs": "latest" - } -} diff --git a/docs/_includes/projects/try/use/.DS_Store b/docs/_includes/projects/try/use/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..66331d9cf4c5433f87bf6f647aa0e1709e2e0271 GIT binary patch literal 8196 zcmeHMU2GLa6h5c4Wq0}Mv;yrS7jD{ADwJ|tsHLRf?VnO8LTsU>l$O1Bw{+unx7^)( zTPQU(#NQZ=KZ%Lx3;I^n#KgoHpYV^UF(EeoCHkN*J{pZCKIxg6Z9{MAgAXbRJITzM znRCv}nQyguIG74DhPXuNh0|JWK2Kpq&&}AVjFct z2t)`(2t)`(2t)|n8VJyt&6Bdsxi7U*86glMa9bk4_lG!TE|a00ky30ORER48$wKND ziRyF@5I*rxCPO(RrEsM&^Zzw2cC%?Eb z2TV#Cl@S6F0!tC#clRPNU<3lN7T@2CAw^vy;6Vng)Pz5ta=a9of0`P1Y(GdOzQ%$T zg+;|H6;)N#HR`FJQE#FrFoLY#W@JwC)=?uEO@;Md`Yf9KR?r!GuC{IXmxhI$ghLg@ZMqsr%PLF-w z^7{j8GT^lV-^&E;!f=?etZzMNk)55hI>_4Zw`n+T#!#JIy*^fX*Y-r?-g`Ud)~qdI zTA8-4FK7F9%CU}3*k&+#!tm3UYufIa0Rqwu>=E0_sHJ#S?RAYYYi>h%1=Ba`o0juZ zSe4SBP1$F&c5rTvtu0xzd5f+MniR@m&*Y<->>WiFnyM|jev)h2GZvMmqR60X^ld6L zlwO~rmOVSPohtLy-iPREiypl}+pREDJ?0oG%aL78TC>6qseL(#rtECd_A8}WtM;e8 zu`ybYFJ?}*>iQ6$x!drABjc7!QC*|yS$V~VPKxRT*R`4^k4dRY)<`l41k|czBIJew zI@Hmja{va3{o`;Eo`z@OS-1qR!xeZN-iJ@%8hi$y!*%!$euSUlSNIKnhdG8y>=Ld;pJNFP_37JdFmP!Ero`J_dLJAH~P;Nqh=lz*le< z-@rHVEqoWR;s^L4euQ7(mpCWmE12i<;V|A%;P+I?r)>Df77X2tva!zlv;+SSWxrj` zd0JX_$GY{Kt7>*MG_|xYJj%Q$cq5ercO*FkY34~G9^oQ3az^VL@6=+)h+EcV{#!85 zbGDMRNSV`#A+dO@QX#&uuvs13st~DJff(!VZ843lApWYNS+`S*u_B_XBAUB)YZ@yg zE=%p6X3`cDYo&JIe$oPe+f*@=Rvn`a^Pe;DGR(qz@G)`kI(!8`z)$cC{7I}U!V+Sg zj+-!sn{g}F;5OWjJMbQC3i;QG_hT0xBo6lCaqPzvIDl!ih=HSMV}=-*!wHIV_sJt^RDDGFV~ZC9nU>O{qt;H>=LzZ2?SQiC@T2<{9 literal 0 HcmV?d00001 diff --git a/docs/_includes/projects/try/use/after/index.html b/docs/_includes/projects/try/use/after/index.html new file mode 100644 index 00000000..9e5379a2 --- /dev/null +++ b/docs/_includes/projects/try/use/after/index.html @@ -0,0 +1,15 @@ + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_includes/projects/try/use/after/index.ts b/docs/_includes/projects/try/use/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/use/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/use/after/manifest.json b/docs/_includes/projects/try/use/after/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_includes/projects/try/use/after/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" + } +} diff --git a/docs/_includes/projects/try/create/custom-element.js b/docs/_includes/projects/try/use/after/my-element.js similarity index 69% rename from docs/_includes/projects/try/create/custom-element.js rename to docs/_includes/projects/try/use/after/my-element.js index cac6a6c6..ddcb66b3 100644 --- a/docs/_includes/projects/try/create/custom-element.js +++ b/docs/_includes/projects/try/use/after/my-element.js @@ -1,14 +1,14 @@ // Import and extend the LitElement base class. import { LitElement, html } from '@polymer/lit-element'; -class CustomElement extends LitElement { +class MyElement extends LitElement { // Return your template from lit-element's `render` function. render(){ return html` -

    hello world from custom-element

    +

    Hello world! From my-element

    `; } } // Register the new element with the browser. -customElements.define('custom-element', CustomElement); +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/use/before/index.html b/docs/_includes/projects/try/use/before/index.html new file mode 100644 index 00000000..ede65eea --- /dev/null +++ b/docs/_includes/projects/try/use/before/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/try/use/before/index.ts b/docs/_includes/projects/try/use/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/use/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/use/before/manifest.json b/docs/_includes/projects/try/use/before/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_includes/projects/try/use/before/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" + } +} diff --git a/docs/projects/try/create/custom-element.js b/docs/_includes/projects/try/use/before/my-element.js similarity index 69% rename from docs/projects/try/create/custom-element.js rename to docs/_includes/projects/try/use/before/my-element.js index cac6a6c6..ddcb66b3 100644 --- a/docs/projects/try/create/custom-element.js +++ b/docs/_includes/projects/try/use/before/my-element.js @@ -1,14 +1,14 @@ // Import and extend the LitElement base class. import { LitElement, html } from '@polymer/lit-element'; -class CustomElement extends LitElement { +class MyElement extends LitElement { // Return your template from lit-element's `render` function. render(){ return html` -

    hello world from custom-element

    +

    Hello world! From my-element

    `; } } // Register the new element with the browser. -customElements.define('custom-element', CustomElement); +customElements.define('my-element', MyElement); diff --git a/docs/_includes/sectionnav.html b/docs/_includes/sectionnav.html new file mode 100644 index 00000000..5ffdc778 --- /dev/null +++ b/docs/_includes/sectionnav.html @@ -0,0 +1,28 @@ +{% assign title = "LitElement Documentation" %} +{% assign sections = site.data.site.toc %} +{% assign section = sections[page.section] %} +{% assign topics = section.toc %} +{% assign topic = topics[page.topic] %} +{% assign subtopics = topic.toc %} +{% assign subtopic = subtopics[page.subtopic] %} + +{% if subtopic %} + {% assign self = subtopic %} +{% elsif topic %} + {% assign self = topic %} +{% elsif section %} + {% assign self=section %} +{% else %} + {% assign self = site.data.site %} +{%endif%} + +
      +{% for item in sections %} + {% if self.url == item[1].url %} +
    • {{item[1].title}}
      • + {% else %} +
    • {{item[1].title}}
      • + {%endif%} + {% include topicnav.html %} +{%endfor%} +
    diff --git a/docs/_includes/tocnav.html b/docs/_includes/tocnav.html index cbf1a1da..63e932c6 100644 --- a/docs/_includes/tocnav.html +++ b/docs/_includes/tocnav.html @@ -6,19 +6,16 @@ - {% for item in site.data.toc.toc %} + {% for item in sections %}
  • - {{ item.title }} - - {% if page.url == item.url or page.parent == item.url %} - - {% endif %} + {{item[1].title}} + {% if page.section == item[0] %} + + {%endif%}
    • - {% endfor %} + {%endfor%} diff --git a/docs/_includes/variables.html b/docs/_includes/variables.html new file mode 100644 index 00000000..5ffdc778 --- /dev/null +++ b/docs/_includes/variables.html @@ -0,0 +1,28 @@ +{% assign title = "LitElement Documentation" %} +{% assign sections = site.data.site.toc %} +{% assign section = sections[page.section] %} +{% assign topics = section.toc %} +{% assign topic = topics[page.topic] %} +{% assign subtopics = topic.toc %} +{% assign subtopic = subtopics[page.subtopic] %} + +{% if subtopic %} + {% assign self = subtopic %} +{% elsif topic %} + {% assign self = topic %} +{% elsif section %} + {% assign self=section %} +{% else %} + {% assign self = site.data.site %} +{%endif%} + +
      +{% for item in sections %} + {% if self.url == item[1].url %} +
    • {{item[1].title}}
      • + {% else %} +
    • {{item[1].title}}
      • + {%endif%} + {% include topicnav.html %} +{%endfor%} +
    diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 5f0251fe..ca515d1d 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -13,6 +13,7 @@ + - + {{content}}
    diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html index 7b97ee5b..ecf86755 100644 --- a/docs/_layouts/post.html +++ b/docs/_layouts/post.html @@ -4,7 +4,24 @@
    - + {% assign title = "LitElement Documentation" %} + {% assign sections = site.data.site.toc %} + {% assign section = sections[page.section] %} + {% assign topics = section.toc %} + {% assign topic = topics[page.topic] %} + {% assign subtopics = topic.toc %} + {% assign subtopic = subtopics[page.subtopic] %} + + {% if subtopic %} + {% assign self = subtopic %} + {% elsif topic %} + {% assign self = topic %} + {% elsif section %} + {% assign self=section %} + {% else %} + {% assign self = site.data.site %} + {%endif%} + diff --git a/docs/_site/about.html b/docs/_site/about.html new file mode 100644 index 00000000..f1b9d5a2 --- /dev/null +++ b/docs/_site/about.html @@ -0,0 +1,118 @@ + + + lit-element docs + + + + + + + + + + + + + +
    + + + + + + + + + + + + + + +
    + + + + + + + diff --git a/docs/_site/css/main.css b/docs/_site/css/main.css index 0fc6d85f..3ae722e7 100644 --- a/docs/_site/css/main.css +++ b/docs/_site/css/main.css @@ -18,6 +18,19 @@ body { letter-spacing: 0.03em; } +.prevnext { + display: flex; + justify-content: space-between; +} +.next { + text-align: right; + order: 2 +} + +.prev { + order: 1 +} + hr { border: 0; height: 0; diff --git a/docs/_site/docs/create/design.html b/docs/_site/docs/create/design.html index 4219f931..052d2b20 100644 --- a/docs/_site/docs/create/design.html +++ b/docs/_site/docs/create/design.html @@ -1,6 +1,6 @@ - Designing web components – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - API Documentation - - - -
    - - + +

    Create an element

    -

    Create an element

    -In this topic: -
    +

    Designing an element

    -

    Designing web components

    +

    These are some brief guidelines for designing extensible, performant, accessible elements. For more information, see the Gold Standard Checklist for Web Components.

    +

    Do one thing well

    +

    An element should do one thing well. It should have a clear, well-defined purpose.

    +

    Instead of giving an element lots of options and features, provide and document properties and methods that other developers can extend for future use cases.

    +

    Keeping your element as small as possible also minimizes its download time.

    -

    TODO: Draft this page

    +

    Optimize performance

    +

    An element must be fast. If it isn’t fast, it can’t do its one thing well.

    + +

    Assess the speed of your element relative to its purpose. The more frequently end users will interact with your element, the faster it needs to be.

    + +

    The most important aspect of an element’s performance is its initial rendering speed. For optimal performance, an element should lazily perform any tasks that aren’t critical to the first render.

    + +

    Design for accessibility

    + +

    Make sure your element is accessible. Use ARIA roles, states, and properties, or extend an accessible native HTML element.

    -
    - - - - - - -
    diff --git a/docs/_site/docs/create/extend.html b/docs/_site/docs/create/extend.html new file mode 100644 index 00000000..c0390c76 --- /dev/null +++ b/docs/_site/docs/create/extend.html @@ -0,0 +1,213 @@ + + + lit-element docs + + + + + + + + + + + + + +
    + + + + + + + + + + + + +
    + + + +

    Create an element

    + + + +
    +

    Extend the LitElement base class

    + + + +

    To add LitElement to your project, install it with npm:

    + +
    npm install @polymer/lit-element --save
+
    + +

    To create a new element:

    + +
      +
    • Import the LitElement base class and the html helper function.
      • +
    • Extend the LitElement base class.
      • +
    • Implement render to define a template for your element.
      • +
    • Register the new element with the browser.
      • +
    + +

    Example

    + +

    my-element.js

    + +
    // Import the LitElement base class and html helper function
+import { LitElement, html } from '@polymer/lit-element';
+
+// Extend the LitElement base class
+class MyElement extends LitElement {
+
+  /**
+   * Implement `render` to define a template for your element.
+   *
+   * You must provide an implementation of `render` for any element
+   * that uses LitElement as a base class.
+   */
+  render(){
+    /** 
+     * `render` must return a lit-html `TemplateResult`. 
+     *
+     * To create a `TemplateResult`, tag a JavaScript template literal
+     * with the `html` helper function: 
+     */
+    return html`
+      <!-- template content -->
+      <p>A paragraph</p>
+    `;
+  }
+}
+// Register the new element with the browser.
+customElements.define('my-element', MyElement);
+
+
    + + + + + + + + + +
    + +
    + + + + + + + diff --git a/docs/_site/docs/create/index.html b/docs/_site/docs/create/index.html index 91017e71..6028b3c8 100644 --- a/docs/_site/docs/create/index.html +++ b/docs/_site/docs/create/index.html @@ -1,6 +1,6 @@ - Create an element – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - API Documentation - - - -
    - - + +

    Create an element

    -

    Create an element

    -In this topic: -
    +

    Overview

    -

    Create an element

    - - - - - - - -

    To add LitElement to your project:

    -
    npm install @polymer/lit-element --save
-
    -

    To create a new element:

    +

    To create a new element, extend the LitElement base class.

    -
      -
    • Import the LitElement base class and the html helper function.
      • -
    • Extend the LitElement base class.
      • -
    • Implement render to define a template for your element.
      • -
    • Register the new element with the browser.
      • -
    - -

    Example

    - -

    my-element.js

    +

    Optionally, you can use TypeScript decorators to create a new element.

    -
    // Import the LitElement base class and html helper function
-import { LitElement, html } from '@polymer/lit-element';
+
    By default, LitElement attaches an open shadow root to the element and renders its template in shadow DOM. To customize where an element’s template will render (for instance, to render into light DOM instead of shadow DOM), see Customize an element’s render root.
    
 
-// Extend the LitElement base class
-class MyElement extends LitElement {
+
    See Designing an element for basic guidelines on developing extensible, performant, accessible elements.
    
 
-  /**
-   * Implement `render` to define a template for your element.
-   *
-   * You must provide an implementation of `render` for any element
-   * that uses LitElement as a base class.
-   */
-  render(){
-    /** 
-     * `render` must return a lit-html `TemplateResult`. 
-     *
-     * To create a `TemplateResult`, tag a JavaScript template literal
-     * with the `html` helper function: 
-     */
-    return html`
-      <!-- template content -->
-      <p>A paragraph</p>
-    `;
-  }
-}
-// Register the new element with the browser.
-customElements.define('my-element', MyElement);
-
-
    - -

    index.html

    - -
    <!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>
-
-
    - - - - - - - -
    - - - - - - -
    diff --git a/docs/_site/docs/create/renderroot.html b/docs/_site/docs/create/renderroot.html index 763a8174..ed17ed5b 100644 --- a/docs/_site/docs/create/renderroot.html +++ b/docs/_site/docs/create/renderroot.html @@ -1,6 +1,6 @@ - Define an element's render root – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - API Documentation - - - -
    - - + +

    Create an element

    -

    Create an element

    -In this topic: -
    - -

    Define an element's render root

    - - - - +

    Customize an element's render root

    @@ -245,15 +215,6 @@

    Example

    -
    - - - - - - -
    -
    diff --git a/docs/_site/docs/create/typescript.html b/docs/_site/docs/create/typescript.html index 34c74c7b..fd9dbbcc 100644 --- a/docs/_site/docs/create/typescript.html +++ b/docs/_site/docs/create/typescript.html @@ -1,6 +1,6 @@ - Use typescript decorators to create an element class – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - API Documentation - - - -
    - - + +

    Create an element

    -

    Create an element

    -In this topic: -
    - -

    Use typescript decorators to create an element class

    +

    Use TypeScript decorators to create a custom element

    +

    Use the @customElement TypeScript decorator to define your class as a custom element:

    +
    /**
+ * Import LitElement base class, html helper function,
+ * and TypeScript decorators 
+ **/
+import { 
+  LitElement, html, customElement, property 
+} from '@polymer/lit-element';
 
+/**
+ * Use the customElement decorator to define your class as
+ * a custom element. Registers <my-element> as an HTML tag.
+ */
+@customElement('my-element')
+export class MyElement extends LitElement {
+  
+  /**
+   * Create an observed property. Triggers update on change.
+   */
+  @property()
+  foo = 'foo';
 
+  /**
+   * Implement `render` to define a template for your element.
+   */
+  render(){
+    /**
+     * Use JavaScript expressions to include property values in
+     * the element template. 
+     */
+    return html`<p>${this.foo}</p>`;
+  }
+}
 
-
    TODO: Draft this page
    
+
    + + + -
    - - - - - - -
    diff --git a/docs/_site/docs/import.html b/docs/_site/docs/import.html index 49ecb3dc..ff02274c 100644 --- a/docs/_site/docs/import.html +++ b/docs/_site/docs/import.html @@ -1,6 +1,6 @@ - Import an existing element – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - API Documentation - - + -
    +

    Import an existing element

    - -

    Import an existing element

    +

    Import and use a LitElement-based element in an HTML document, or in another element.

    -
    +

    On this page:

    + +

    Import and use your own element

    +

    In an HTML document:

    +
    <head>
+  <script type="module" src="/path/to/my-element.js"></script>
+</head>
+<body>
+  <my-element></my-element>
+</body>
+
    -

    Import and use a LitElement-based element in an HTML document or another element.

    +

    In another LitElement-based element:

    -

    On this page:

    +
    // Use relative paths for peer dependencies
+import './my-element.js';
 
-
+class MyOtherElement extends LitElement{
+  render(){
+    return html`
+      <my-element></my-element>
+    `;
+  }
+}
+customElements.define('my-other-element', MyOtherElement);
+

    @@ -182,42 +181,6 @@

    Import and use a third-party eleme

    -

    Import and use your own element

    - -

    In an HTML document:

    - -
    <head>
-  <script type="module" src="/path/to/my-element.js"></script>
-</head>
-<body>
-  <my-element></my-element>
-</body>
-
    - -

    In another LitElement-based element:

    - -
    // Use relative paths for peer dependencies
-import './my-element.js';
-
-class MyOtherElement extends LitElement{
-  render(){
-    return html`
-      <my-element></my-element>
-    `;
-  }
-}
-customElements.define('my-other-element', MyOtherElement);
-
    - - -
    - - - - - - -
    diff --git a/docs/_site/docs/index.html b/docs/_site/docs/index.html index d4411d7a..442ce7c9 100644 --- a/docs/_site/docs/index.html +++ b/docs/_site/docs/index.html @@ -1,6 +1,6 @@ - API Documentation – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + + diff --git a/docs/_site/docs/templates/annotations.html b/docs/_site/docs/templates/annotations.html index 69d6aa96..a144d3b6 100644 --- a/docs/_site/docs/templates/annotations.html +++ b/docs/_site/docs/templates/annotations.html @@ -1,6 +1,6 @@ - Bind data to a child element in a template – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - API Documentation - - - -
    - - + +

    Write a template

    -

    Write a template

    -In this topic: -
    -

    Bind data to a child element in a template

    - - - -

    Use lit-element annotations with JavaScript expressions to bind data from an element’s properties to a child element in its template.

    Bind to a child element’s:

    @@ -262,15 +226,6 @@

    Example

    To share data from child elements to parent elements, use events. See … for more information.

    -
    - - - - - - -
    -
    diff --git a/docs/_site/docs/templates/compose.html b/docs/_site/docs/templates/compose.html index 212921a8..065e7546 100644 --- a/docs/_site/docs/templates/compose.html +++ b/docs/_site/docs/templates/compose.html @@ -1,6 +1,6 @@ - Compose and nest lit-element templates – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - API Documentation - - - -
    - - + +

    Write a template

    -

    Write a template

    -In this topic: -
    -

    Compose and nest lit-element templates

    - - - -

    You can compose LitElement templates from other LitElement templates:

    class MyApp extends LitElement {
@@ -271,15 +235,6 @@ 
    Example
    -
    - - - - - - -
    -
    diff --git a/docs/_site/docs/templates/design.html b/docs/_site/docs/templates/design.html index e4489c80..74e916b1 100644 --- a/docs/_site/docs/templates/design.html +++ b/docs/_site/docs/templates/design.html @@ -1,6 +1,6 @@ - Designing efficient LitElement templates – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - API Documentation - - - -
    - - + +

    Write a template

    -

    Write a template

    -In this topic: -
    -

    Designing efficient LitElement templates

    - - - -

    Summary

    @@ -323,15 +287,6 @@

    Example

    -
    - - - - - - -
    -
    diff --git a/docs/_site/docs/templates/expressions.html b/docs/_site/docs/templates/expressions.html index 0adf260c..6e6f1aad 100644 --- a/docs/_site/docs/templates/expressions.html +++ b/docs/_site/docs/templates/expressions.html @@ -1,6 +1,6 @@ - Use plain JavaScript expressions in a template – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - API Documentation - - - -
    - - + +

    Write a template

    -

    Write a template

    -In this topic: -
    -

    Use plain JavaScript expressions in a template

    +

    Use plain JavaScript expressions in a LitElement template to handle loops, conditionals, data binding, and composition.

    +

    Loops

    +

    Iterate over an array:

    +
    html`<ul>
+  ${myArray.map(i => html`<li><a href="${i.url}">${i.title}</a></li>`)}
+</ul>`;
+
    +
    render(){
+  return html`
+    <ul>
+      ${myArray.map(i => html`<li>${i}</li>`)}
+    </ul>
+    ${myBool?
+      html`<p>Render some HTML if myBool is true</p>`:
+      html`<p>Render some other HTML if myBool is false</p>`}
+  `;
+}
+
    +

    Conditionals

    -
    - - - - - - -
    -
    diff --git a/docs/_site/docs/templates/index.html b/docs/_site/docs/templates/index.html index c3b0e6a9..f31e89ed 100644 --- a/docs/_site/docs/templates/index.html +++ b/docs/_site/docs/templates/index.html @@ -1,6 +1,6 @@ - Write a template – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - API Documentation - - - -
    - - + +

    Write a template

    -

    Write a template

    -In this topic: -
    -

    Write a template

    @@ -167,19 +135,6 @@

    Write a template

    - - - -
    - - - - - - -
    - -
    diff --git a/docs/_site/docs/templates/slots.html b/docs/_site/docs/templates/slots.html index 85a2b367..5b00d779 100644 --- a/docs/_site/docs/templates/slots.html +++ b/docs/_site/docs/templates/slots.html @@ -1,6 +1,6 @@ - Render light DOM children in a template – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - API Documentation - - - -
    - - + +

    Write a template

    -

    Write a template

    -In this topic: -
    -

    Render light DOM children in a template

    - - - -

    On this page:

      @@ -285,15 +249,6 @@

      Use nam -
      - - - - - - -
      -

    diff --git a/docs/_site/index.html b/docs/_site/index.html index 5fa44e4d..a4312c82 100644 --- a/docs/_site/index.html +++ b/docs/_site/index.html @@ -1,6 +1,6 @@ - lit-element – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + + diff --git a/docs/_site/projects/docs/expressions/README.md b/docs/_site/projects/docs/expressions/README.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/_includes/projects/try/expressions/custom-element.js b/docs/_site/projects/docs/expressions/custom-element.js similarity index 100% rename from docs/_includes/projects/try/expressions/custom-element.js rename to docs/_site/projects/docs/expressions/custom-element.js diff --git a/docs/_includes/projects/try/expressions/index.html b/docs/_site/projects/docs/expressions/index.html similarity index 100% rename from docs/_includes/projects/try/expressions/index.html rename to docs/_site/projects/docs/expressions/index.html diff --git a/docs/_includes/projects/try/create/index.ts b/docs/_site/projects/docs/expressions/index.ts similarity index 100% rename from docs/_includes/projects/try/create/index.ts rename to docs/_site/projects/docs/expressions/index.ts diff --git a/docs/_site/projects/docs/expressions/manifest.json b/docs/_site/projects/docs/expressions/manifest.json new file mode 100644 index 00000000..9eca53a2 --- /dev/null +++ b/docs/_site/projects/docs/expressions/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" +} diff --git a/docs/_site/projects/docs/tryexpressions/README.md b/docs/_site/projects/docs/tryexpressions/README.md deleted file mode 100644 index 36a075b5..00000000 --- a/docs/_site/projects/docs/tryexpressions/README.md +++ /dev/null @@ -1,16 +0,0 @@ -## Use simple JavaScript expressions for loops and conditionals - -Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: - -```js -render(){ - return html` -
      - ${myArray.map(i => html`
    • ${i}
      • `)} -
    - ${myBool? - html`

    Render some HTML if myBool is true

    `: - html`

    Render some other HTML if myBool is false

    `} - `; -} -``` diff --git a/docs/_site/projects/docs/tryexpressions/index.ts b/docs/_site/projects/docs/tryexpressions/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/_site/projects/docs/tryexpressions/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/_site/projects/docs/tryexpressions/manifest.json b/docs/_site/projects/docs/tryexpressions/manifest.json deleted file mode 100644 index d3c0108c..00000000 --- a/docs/_site/projects/docs/tryexpressions/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "title": "lit-element code sample", - "description": "lit-element code sample", - "files": [ - "custom-element.js", - "index.html", - "index.ts", - "README.md" - ], - "dependencies": { - "@polymer/lit-element": "latest", - "@webcomponents/webcomponentsjs": "latest" - }, - "template": "typescript" -} diff --git a/docs/_site/projects/docs/typescript/index.html b/docs/_site/projects/docs/typescript/index.html new file mode 100644 index 00000000..af6b024d --- /dev/null +++ b/docs/_site/projects/docs/typescript/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_site/projects/docs/typescript/index.ts b/docs/_site/projects/docs/typescript/index.ts new file mode 100644 index 00000000..40cbb8d8 --- /dev/null +++ b/docs/_site/projects/docs/typescript/index.ts @@ -0,0 +1 @@ +import './my-element.ts'; diff --git a/docs/_site/projects/docs/typescript/manifest.json b/docs/_site/projects/docs/typescript/manifest.json new file mode 100644 index 00000000..1a862572 --- /dev/null +++ b/docs/_site/projects/docs/typescript/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "my-element.ts", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_site/projects/docs/typescript/my-element.ts b/docs/_site/projects/docs/typescript/my-element.ts new file mode 100644 index 00000000..5ade03b1 --- /dev/null +++ b/docs/_site/projects/docs/typescript/my-element.ts @@ -0,0 +1,32 @@ +/** + * Import LitElement base class, html helper function, + * and TypeScript decorators + **/ +import { + LitElement, html, customElement, property +} from '@polymer/lit-element'; + +/** + * Use the customElement decorator to define your class as + * a custom element. Registers as an HTML tag. + */ +@customElement('my-element') +export class MyElement extends LitElement { + + /** + * Create an observed property. Triggers update on change. + */ + @property() + foo = 'foo'; + + /** + * Implement `render` to define a template for your element. + */ + render(){ + /** + * Use JavaScript expressions to include property values in + * the element template. + */ + return html`

    ${this.foo}

    `; + } +} diff --git a/docs/_site/projects/try/create/README.md b/docs/_site/projects/try/create/README.md deleted file mode 100644 index 932a89e2..00000000 --- a/docs/_site/projects/try/create/README.md +++ /dev/null @@ -1,3 +0,0 @@ -## lit-element docs - -This is a code sample for the lit-element docs. diff --git a/docs/_site/projects/try/create/index.html b/docs/_site/projects/try/create/after/index.html similarity index 92% rename from docs/_site/projects/try/create/index.html rename to docs/_site/projects/try/create/after/index.html index 814d63a2..a097c2fe 100644 --- a/docs/_site/projects/try/create/index.html +++ b/docs/_site/projects/try/create/after/index.html @@ -9,6 +9,6 @@ lit-element code sample - + diff --git a/docs/_site/projects/try/create/after/index.ts b/docs/_site/projects/try/create/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/create/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/create/after/manifest.json b/docs/_site/projects/try/create/after/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_site/projects/try/create/after/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" + } +} diff --git a/docs/_site/projects/try/create/after/my-element.js b/docs/_site/projects/try/create/after/my-element.js new file mode 100644 index 00000000..e0bcdebc --- /dev/null +++ b/docs/_site/projects/try/create/after/my-element.js @@ -0,0 +1,14 @@ +// Import LitElement base class and html helper function +import { LitElement, html } from '@polymer/lit-element'; + +// Create your class here +class MyElement extends LitElement { + render(){ + // Define your element template here + return html` +

    Hello world! From my-element

    + `; + } +} +// Register the element with the browser +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/try/create/before/index.html b/docs/_site/projects/try/create/before/index.html new file mode 100644 index 00000000..a097c2fe --- /dev/null +++ b/docs/_site/projects/try/create/before/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_site/projects/try/create/before/index.ts b/docs/_site/projects/try/create/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/create/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/create/before/manifest.json b/docs/_site/projects/try/create/before/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_site/projects/try/create/before/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" + } +} diff --git a/docs/_site/projects/try/create/before/my-element.js b/docs/_site/projects/try/create/before/my-element.js new file mode 100644 index 00000000..f575ebfa --- /dev/null +++ b/docs/_site/projects/try/create/before/my-element.js @@ -0,0 +1,12 @@ +// Import LitElement base class and html helper function +import { } from ''; + +// Create your class here +class MyElement { + render(){ + // Define your element template here + } +} + +// Register the element with the browser +customElements.define(); diff --git a/docs/_site/projects/try/create/index.ts b/docs/_site/projects/try/create/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/_site/projects/try/create/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/_site/projects/try/events/README.md b/docs/_site/projects/try/events/README.md deleted file mode 100644 index 23e0c9e2..00000000 --- a/docs/_site/projects/try/events/README.md +++ /dev/null @@ -1,14 +0,0 @@ -## Add event listeners in plain HTML - -Use JavaScript expressions to add event listeners in plain HTML: - -```js -render(){ - return html` - - `; -} -clickHander(event){ - console.log(event.detail); -} -``` diff --git a/docs/_site/projects/try/events/after/index.html b/docs/_site/projects/try/events/after/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_site/projects/try/events/after/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_site/projects/try/events/after/index.ts b/docs/_site/projects/try/events/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/events/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/events/after/manifest.json b/docs/_site/projects/try/events/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_site/projects/try/events/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_site/projects/try/events/after/my-element.js b/docs/_site/projects/try/events/after/my-element.js new file mode 100644 index 00000000..c97d83c9 --- /dev/null +++ b/docs/_site/projects/try/events/after/my-element.js @@ -0,0 +1,41 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + + this.message='Hello world! From my-element'; + + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` +

    ${this.message}

    + +
      + ${this.myArray.map(i => html`
    • ${i}
      • `)} +
    + ${this.myBool? + html`

    Render some HTML if myBool is true

    `: + html`

    Render some other HTML if myBool is false

    `} + + + + `; + } + // Add an event handler here. + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/try/events/before/index.html b/docs/_site/projects/try/events/before/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_site/projects/try/events/before/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_site/projects/try/events/before/index.ts b/docs/_site/projects/try/events/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/events/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/events/before/manifest.json b/docs/_site/projects/try/events/before/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_site/projects/try/events/before/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_site/projects/try/events/before/my-element.js b/docs/_site/projects/try/events/before/my-element.js new file mode 100644 index 00000000..15655133 --- /dev/null +++ b/docs/_site/projects/try/events/before/my-element.js @@ -0,0 +1,37 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + + this.message='Hello world! From my-element'; + + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` +

    ${this.message}

    + +
      + ${this.myArray.map(i => html`
    • ${i}
      • `)} +
    + ${this.myBool? + html`

    Render some HTML if myBool is true

    `: + html`

    Render some other HTML if myBool is false

    `} + + + + `; + } + // Add an event handler here. +} +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/try/events/custom-element.js b/docs/_site/projects/try/events/custom-element.js deleted file mode 100644 index c10a5737..00000000 --- a/docs/_site/projects/try/events/custom-element.js +++ /dev/null @@ -1,15 +0,0 @@ -import { LitElement, html } from '@polymer/lit-element'; - -class CustomElement extends LitElement { - render(){ - return html` -

    check the console

    - - `; - } - clickHandler(event){ - console.log(event.target.id + ' was clicked.'); - } -} - -customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/try/events/index.html b/docs/_site/projects/try/events/index.html deleted file mode 100644 index 79284648..00000000 --- a/docs/_site/projects/try/events/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - lit-element code sample - - - - - diff --git a/docs/_site/projects/try/events/index.ts b/docs/_site/projects/try/events/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/_site/projects/try/events/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/_site/projects/try/events/manifest.json b/docs/_site/projects/try/events/manifest.json deleted file mode 100644 index d3c0108c..00000000 --- a/docs/_site/projects/try/events/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "title": "lit-element code sample", - "description": "lit-element code sample", - "files": [ - "custom-element.js", - "index.html", - "index.ts", - "README.md" - ], - "dependencies": { - "@polymer/lit-element": "latest", - "@webcomponents/webcomponentsjs": "latest" - }, - "template": "typescript" -} diff --git a/docs/_site/projects/try/expressions/README.md b/docs/_site/projects/try/expressions/README.md deleted file mode 100644 index 36a075b5..00000000 --- a/docs/_site/projects/try/expressions/README.md +++ /dev/null @@ -1,16 +0,0 @@ -## Use simple JavaScript expressions for loops and conditionals - -Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: - -```js -render(){ - return html` -
      - ${myArray.map(i => html`
    • ${i}
      • `)} -
    - ${myBool? - html`

    Render some HTML if myBool is true

    `: - html`

    Render some other HTML if myBool is false

    `} - `; -} -``` diff --git a/docs/_site/projects/try/expressions/after/index.html b/docs/_site/projects/try/expressions/after/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_site/projects/try/expressions/after/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_site/projects/try/expressions/after/index.ts b/docs/_site/projects/try/expressions/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/expressions/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/expressions/after/manifest.json b/docs/_site/projects/try/expressions/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_site/projects/try/expressions/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/projects/docs/tryexpressions/custom-element.js b/docs/_site/projects/try/expressions/after/my-element.js similarity index 58% rename from docs/projects/docs/tryexpressions/custom-element.js rename to docs/_site/projects/try/expressions/after/my-element.js index a5a6b9ce..d1b89ecb 100644 --- a/docs/projects/docs/tryexpressions/custom-element.js +++ b/docs/_site/projects/try/expressions/after/my-element.js @@ -1,19 +1,28 @@ -import { LitElement, html } from '@polymer/lit-element'; +import { LitElement, html } from '@polymer/lit-element'; -class CustomElement extends LitElement { +class MyElement extends LitElement { static get properties(){ return { + message: { type: String }, myArray: { type: Array }, myBool: { type: Boolean } }; } constructor(){ super(); + + this.message='Hello world! From my-element'; + + // Initialize myArray and myBool here. this.myArray = ['an','array','of','test','data']; this.myBool = true; } + render(){ return html` +

    ${this.message}

    + +
      ${this.myArray.map(i => html`
    • ${i}
      • `)}
    @@ -23,5 +32,4 @@ class CustomElement extends LitElement { `; } } - -customElements.define('custom-element', CustomElement); +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/try/expressions/before/index.html b/docs/_site/projects/try/expressions/before/index.html new file mode 100644 index 00000000..cf412668 --- /dev/null +++ b/docs/_site/projects/try/expressions/before/index.html @@ -0,0 +1,16 @@ + + + + + + + + + lit-element code sample + + + + + + + diff --git a/docs/_site/projects/try/expressions/before/index.ts b/docs/_site/projects/try/expressions/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/expressions/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/expressions/before/manifest.json b/docs/_site/projects/try/expressions/before/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_site/projects/try/expressions/before/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_site/projects/try/expressions/before/my-element.js b/docs/_site/projects/try/expressions/before/my-element.js new file mode 100644 index 00000000..ba5ab840 --- /dev/null +++ b/docs/_site/projects/try/expressions/before/my-element.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + + // Initialize myArray and myBool here. + + } + + render(){ + return html` +

    ${this.message}

    + + + `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/try/expressions/index.ts b/docs/_site/projects/try/expressions/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/_site/projects/try/expressions/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/_site/projects/try/expressions/manifest.json b/docs/_site/projects/try/expressions/manifest.json deleted file mode 100644 index d3c0108c..00000000 --- a/docs/_site/projects/try/expressions/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "title": "lit-element code sample", - "description": "lit-element code sample", - "files": [ - "custom-element.js", - "index.html", - "index.ts", - "README.md" - ], - "dependencies": { - "@polymer/lit-element": "latest", - "@webcomponents/webcomponentsjs": "latest" - }, - "template": "typescript" -} diff --git a/docs/_site/projects/try/properties/README.md b/docs/_site/projects/try/properties/README.md deleted file mode 100644 index 932a89e2..00000000 --- a/docs/_site/projects/try/properties/README.md +++ /dev/null @@ -1,3 +0,0 @@ -## lit-element docs - -This is a code sample for the lit-element docs. diff --git a/docs/_site/projects/try/properties/after/index.html b/docs/_site/projects/try/properties/after/index.html new file mode 100644 index 00000000..cf412668 --- /dev/null +++ b/docs/_site/projects/try/properties/after/index.html @@ -0,0 +1,16 @@ + + + + + + + + + lit-element code sample + + + + + + + diff --git a/docs/_site/projects/try/properties/after/index.ts b/docs/_site/projects/try/properties/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/properties/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/properties/after/manifest.json b/docs/_site/projects/try/properties/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_site/projects/try/properties/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_site/projects/try/properties/after/my-element.js b/docs/_site/projects/try/properties/after/my-element.js new file mode 100644 index 00000000..2d847bec --- /dev/null +++ b/docs/_site/projects/try/properties/after/my-element.js @@ -0,0 +1,23 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + // Declare property here. + message: { type: String } + }; + } + constructor(){ + super(); + // Initialize property here. + this.message='Hello world! From my-element'; + } + + render(){ + return html` + +

    ${this.message}

    + `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/try/properties/before/index.html b/docs/_site/projects/try/properties/before/index.html new file mode 100644 index 00000000..1a1c0a6e --- /dev/null +++ b/docs/_site/projects/try/properties/before/index.html @@ -0,0 +1,15 @@ + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_site/projects/try/properties/before/index.ts b/docs/_site/projects/try/properties/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/properties/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/properties/before/manifest.json b/docs/_site/projects/try/properties/before/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_site/projects/try/properties/before/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" + } +} diff --git a/docs/_site/projects/try/properties/before/my-element.js b/docs/_site/projects/try/properties/before/my-element.js new file mode 100644 index 00000000..60713723 --- /dev/null +++ b/docs/_site/projects/try/properties/before/my-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + // Declare property here. + }; + } + constructor(){ + super(); + // Initialize property here. + } + render(){ + return html` + +

    + `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/try/properties/custom-element.js b/docs/_site/projects/try/properties/custom-element.js deleted file mode 100644 index de47c3e0..00000000 --- a/docs/_site/projects/try/properties/custom-element.js +++ /dev/null @@ -1,25 +0,0 @@ -import { LitElement, html } from '@polymer/lit-element'; - -class CustomElement extends LitElement { - // Declare properties. - static get properties(){ - return { - headingtext: { type: String } - }; - } - constructor(){ - // Always call superconstructor when you override the constructor. - super(); - - // You can initialize properties in the element constructor. - this.headingtext='Hello World!'; - } - render(){ - return html` - -

    ${this.headingtext}

    - `; - } -} - -customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/try/properties/index.ts b/docs/_site/projects/try/properties/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/_site/projects/try/properties/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/_site/projects/try/properties/manifest.json b/docs/_site/projects/try/properties/manifest.json deleted file mode 100644 index d3c0108c..00000000 --- a/docs/_site/projects/try/properties/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "title": "lit-element code sample", - "description": "lit-element code sample", - "files": [ - "custom-element.js", - "index.html", - "index.ts", - "README.md" - ], - "dependencies": { - "@polymer/lit-element": "latest", - "@webcomponents/webcomponentsjs": "latest" - }, - "template": "typescript" -} diff --git a/docs/_site/projects/try/style/README.md b/docs/_site/projects/try/style/README.md deleted file mode 100644 index 932a89e2..00000000 --- a/docs/_site/projects/try/style/README.md +++ /dev/null @@ -1,3 +0,0 @@ -## lit-element docs - -This is a code sample for the lit-element docs. diff --git a/docs/_site/projects/try/style/after/index.html b/docs/_site/projects/try/style/after/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_site/projects/try/style/after/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_site/projects/try/style/after/index.ts b/docs/_site/projects/try/style/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/style/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/style/after/manifest.json b/docs/_site/projects/try/style/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_site/projects/try/style/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_site/projects/try/style/after/my-element.js b/docs/_site/projects/try/style/after/my-element.js new file mode 100644 index 00000000..34957ea8 --- /dev/null +++ b/docs/_site/projects/try/style/after/my-element.js @@ -0,0 +1,50 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` + + + +

    ${this.message}

    + +
      ${this.myArray.map(i => html`
    • ${i}
      • `)}
    + + +

    style me

    + + + `; + } + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/try/style/before/index.html b/docs/_site/projects/try/style/before/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_site/projects/try/style/before/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_site/projects/try/style/before/index.ts b/docs/_site/projects/try/style/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/style/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/style/before/manifest.json b/docs/_site/projects/try/style/before/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_site/projects/try/style/before/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_site/projects/try/style/before/my-element.js b/docs/_site/projects/try/style/before/my-element.js new file mode 100644 index 00000000..c1dfee26 --- /dev/null +++ b/docs/_site/projects/try/style/before/my-element.js @@ -0,0 +1,37 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` + + +

    ${this.message}

    + +
      ${this.myArray.map(i => html`
    • ${i}
      • `)}
    + + +

    style me

    + + + `; + } + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/try/style/custom-element.js b/docs/_site/projects/try/style/custom-element.js deleted file mode 100644 index 2b7d187f..00000000 --- a/docs/_site/projects/try/style/custom-element.js +++ /dev/null @@ -1,13 +0,0 @@ -import { LitElement, html } from '@polymer/lit-element'; - -class CustomElement extends LitElement { - render(){ - return html` - -

    hello world from custom-element

    - `; - } -} -customElements.define('custom-element', CustomElement); diff --git a/docs/_site/projects/try/style/index.html b/docs/_site/projects/try/style/index.html deleted file mode 100644 index 7377576f..00000000 --- a/docs/_site/projects/try/style/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - lit-element code sample - - - -

    A paragraph in the main document

    - diff --git a/docs/_site/projects/try/style/index.ts b/docs/_site/projects/try/style/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/_site/projects/try/style/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/_site/projects/try/use/after/index.html b/docs/_site/projects/try/use/after/index.html new file mode 100644 index 00000000..9e5379a2 --- /dev/null +++ b/docs/_site/projects/try/use/after/index.html @@ -0,0 +1,15 @@ + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_site/projects/try/use/after/index.ts b/docs/_site/projects/try/use/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/use/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/use/after/manifest.json b/docs/_site/projects/try/use/after/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_site/projects/try/use/after/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" + } +} diff --git a/docs/_site/projects/try/create/custom-element.js b/docs/_site/projects/try/use/after/my-element.js similarity index 69% rename from docs/_site/projects/try/create/custom-element.js rename to docs/_site/projects/try/use/after/my-element.js index cac6a6c6..ddcb66b3 100644 --- a/docs/_site/projects/try/create/custom-element.js +++ b/docs/_site/projects/try/use/after/my-element.js @@ -1,14 +1,14 @@ // Import and extend the LitElement base class. import { LitElement, html } from '@polymer/lit-element'; -class CustomElement extends LitElement { +class MyElement extends LitElement { // Return your template from lit-element's `render` function. render(){ return html` -

    hello world from custom-element

    +

    Hello world! From my-element

    `; } } // Register the new element with the browser. -customElements.define('custom-element', CustomElement); +customElements.define('my-element', MyElement); diff --git a/docs/_site/projects/try/use/before/index.html b/docs/_site/projects/try/use/before/index.html new file mode 100644 index 00000000..ede65eea --- /dev/null +++ b/docs/_site/projects/try/use/before/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_site/projects/try/use/before/index.ts b/docs/_site/projects/try/use/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_site/projects/try/use/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_site/projects/try/use/before/manifest.json b/docs/_site/projects/try/use/before/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_site/projects/try/use/before/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" + } +} diff --git a/docs/_site/projects/try/use/before/my-element.js b/docs/_site/projects/try/use/before/my-element.js new file mode 100644 index 00000000..ddcb66b3 --- /dev/null +++ b/docs/_site/projects/try/use/before/my-element.js @@ -0,0 +1,14 @@ +// Import and extend the LitElement base class. +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + // Return your template from lit-element's `render` function. + render(){ + return html` + +

    Hello world! From my-element

    + `; + } +} +// Register the new element with the browser. +customElements.define('my-element', MyElement); diff --git a/docs/_site/styleguide.html b/docs/_site/styleguide.html index 28ccfe4b..ed337822 100644 --- a/docs/_site/styleguide.html +++ b/docs/_site/styleguide.html @@ -1,6 +1,6 @@ - lit-element style guide – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - - -
    - diff --git a/docs/_site/tools/index.html b/docs/_site/tools/index.html index f6edb57b..e064e419 100644 --- a/docs/_site/tools/index.html +++ b/docs/_site/tools/index.html @@ -1,6 +1,6 @@ - Tools – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + + diff --git a/docs/_site/tools/setup.html b/docs/_site/tools/setup.html index 1f7c229b..ba3cc5a5 100644 --- a/docs/_site/tools/setup.html +++ b/docs/_site/tools/setup.html @@ -1,6 +1,6 @@ - Set up lit-element locally – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + + diff --git a/docs/_site/try/create.html b/docs/_site/try/create.html index 5da15f75..4a9d32ac 100644 --- a/docs/_site/try/create.html +++ b/docs/_site/try/create.html @@ -1,6 +1,6 @@ - Create your first custom element – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - Try lit-element - - + + +

    Create your first custom element

    -
    - +

    In this step, you’ll fill in the gaps in the starting code to create an element class with a basic HTML template.

    + + -

    Create your first custom element

    +

    -
    +

    Starting code

    +

    my-element.js

    +
    // Import LitElement base class and html helper function
+import { } from ''; 
 
+// Create your class here
+class MyElement {
+  render(){
+    // Define your element template here
+  }
+}
 
+// Register the element with the browser
+customElements.define();
 
-
    To create a new custom element with lit-element:
    
+
    -
      -
    • Import and extend the LitElement base class.
      • -
    • Define your element template inside lit-element’s render function.
      • -
    • Register the new element with the browser.
      • -
    +

    Click inside the following live sample to start editing. When you’re ready to see your code in action, click the Preview button.

    -

    You can now import your element as a JavaScript module, and use it in markup.

    + + + -

    custom-element.js

    +

    -
    // Import and extend the LitElement base class.
-import { LitElement, html } from '@polymer/lit-element'; 
+
    Editing steps
    
 
-class CustomElement extends LitElement {
-  // Return your template from lit-element's `render` function.
+
      
+  
    1. 
+    
      Import the LitElement base class and html helper function.
      
+
+    
      my-element.js
      
+
+    
      // Import LitElement base class and html helper function
+import { } from ''; 
+
          
      
+
+    
      Import statements
      
+
+    
      import { LitElement, html } from '@polymer/lit-element'; 
+
          
      
+  
      2. 
+  
    2. 
+    
      Create a class for your element that extends the LitElement base class, and define an element template inside the render function.
      
+
+    
      my-element.js
      
+
+    
      // Create your class here
+class MyElement {
+  render(){
+    // Define your element template here
+  }
+}
+
          
      
+
+    
      MyElement class
      
+
+    
      class MyElement extends LitElement {
   render(){
     return html`
-      <!-- Write your element template in plain HTML. -->
-      <p>hello world from custom-element</p>
+      <p>Hello world! From my-element</p>
     `;
   }
-}
-// Register the new element with the browser.
-customElements.define('custom-element', CustomElement);
+}    
+
          
      
+  
      3. 
+  
    3. 
+    
      Register the new element with the browser.
      
 
-
    +

    my-element.js

    + + 
    // Register the element with the browser
+customElements.define();
+
    + +

    Register element with the browser

    -

    index.html

    - -
    <!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>
-    <custom-element></custom-element>
-  </body>
-</html>
+    
    // Register the element with the browser
+customElements.define('my-element', MyElement);
+
        
    
+  
+
+
+
    
+
+
    Completed code
    
+
+
    my-element.js
    
+
+
    // Import LitElement base class and html helper function
+import { LitElement, html } from '@polymer/lit-element'; 
+
+// Create your class here
+class MyElement extends LitElement {
+  render(){
+    // Define your element template here
+    return html`
+      <p>Hello world! From my-element</p>
+    `;
+  }
+}
+// Register the element with the browser
+customElements.define('my-element', MyElement);
 
 
    
 
-
+
 
 
 
+
    
 
+  
+
+  
 
-
    
-  
-    
-  
-  
-     
-    Add a property value to your template >>
-    
-  
 
    
 
 
+
    diff --git a/docs/_site/try/events.html b/docs/_site/try/events.html index 2a99f1e4..0eb13f87 100644 --- a/docs/_site/try/events.html +++ b/docs/_site/try/events.html @@ -1,6 +1,6 @@ - Use event handlers in templates – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - Try lit-element - - + + +

    Add an event handler

    + -
    +

    Use lit-html’s @event annotation to add an event listener to an element inside a template.

    + + + +

    + +

    Starting code

    + +

    my-element.js

    + +
    import { LitElement, html } from '@polymer/lit-element'; 
+
+class MyElement extends LitElement {
+  static get properties(){
+    return {
+      message: { type: String },
+      myArray: { type: Array },
+      myBool: { type: Boolean }
+    };
+  }
+  constructor(){
+    super();
+
+    this.message='Hello world! From my-element';
+    
+    this.myArray = ['an','array','of','test','data'];
+    this.myBool = true;
+  }
 
- 
+  render(){
+    return html`
+      <p>${this.message}</p>
 
-
    Use event handlers in templates
    
+      <ul>
+            ${this.myArray.map(i => html`<li>${i}</li>`)}
+      </ul>
+      ${this.myBool?
+        html`<p>Render some HTML if myBool is true</p>`:
+        html`<p>Render some other HTML if myBool is false</p>`}
 
-
    
+      <!-- Annotate the button to add an event listener. --> 
+      <button>Click</button>
+    `    ;
+  }
+  // Add an event handler here.
+}
+customElements.define('my-element', MyElement);
 
+
    + + + +

    +

    Editing steps

    -

    Use lit-html’s @event notation to add an event handler to an element inside a template. For example:

    +

    In the element template in render, annotate a <button> to add an event listener:

    -

    Print click events for a button to the console:

    +

    my-element.js

    render(){
   return html`
-    <button @click="${(e) => console.log(e)}">click me</button>
+    ...
+    
+    <!-- Annotate the button to add an event listener. --> 
+    <button></button>
   `;
 }
    -

    Send click events for a button to a method on your element:

    +

    Annotated button

    + +
    <button @click="${(event) => this.clickHandler(event)}">Click</button>
+
    + +

    To handle the event, add an event handler method to the MyElement class.

    + +

    my-element.js

    -
    doStuff(e){
-  console.log(e);
-  console.log(e.detail);
-  console.log(e.target.id);
+
    class MyElement extend LitElement { 
+  ...
+  render(){
+    ...
+  }
+  // Add an event handler here.
 }
-render(){
-  return html`
-    <button @click="${(e) => this.doStuff(e)}">click me</button>
-  `;
+
    
+
+
    Event handler code
    
+
+
    clickHandler(event){
+  console.log(event.target);
+  this.myBool = !this.myBool;
 }
 
    
 
-
    custom-element.js
    
-
    import { LitElement, html } from '@polymer/lit-element';
+
    
+
+
    Completed code
    
+
+
    my-element.js
    
+
+
    import { LitElement, html } from '@polymer/lit-element'; 
+
+class MyElement extends LitElement {
+  static get properties(){
+    return {
+      message: { type: String },
+      myArray: { type: Array },
+      myBool: { type: Boolean }
+    };
+  }
+  constructor(){
+    super();
+
+    this.message='Hello world! From my-element';
+    
+    this.myArray = ['an','array','of','test','data'];
+    this.myBool = true;
+  }
 
-class CustomElement extends LitElement {  
   render(){
     return html`
-      <p>check the console</p>
-      <button 
-        id="mybutton" 
-        @click="${(event) => this.clickHandler(event)}">click</button>
+      <p>${this.message}</p>
+
+      <ul>
+        ${this.myArray.map(i => html`<li>${i}</li>`)}
+      </ul>
+      ${this.myBool?
+        html`<p>Render some HTML if myBool is true</p>`:
+        html`<p>Render some other HTML if myBool is false</p>`}
+      
+      <!-- Annotate the button to add an event listener. --> 
+      <button @click="${(event) => this.clickHandler(event)}">Click</button>
     `;
   }
+  // Add an event handler here.
   clickHandler(event){
-    console.log(event.target.id + ' was clicked.');
+    console.log(event.target);
+    this.myBool = !this.myBool;
   }
 }
+customElements.define('my-element', MyElement);
 
-customElements.define('custom-element', CustomElement);
 
    
 
-
+
 
 
 
+
    
 
+  
+
+  
 
-
    
-  
-     
-    << Write loops and conditionals
-    
-  
-  
-     
-    Style >>
-    
-  
 
    
 
 
+
    diff --git a/docs/_site/try/expressions.html b/docs/_site/try/expressions.html index ae1bab37..61a76105 100644 --- a/docs/_site/try/expressions.html +++ b/docs/_site/try/expressions.html @@ -1,6 +1,6 @@ - Write loops and conditionals with simple JavaScript expressions – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - Try lit-element - - + -
    +

    Add a loop and an “if” statement

    + + + + +

    Handling conditionals and loops in your LitElement templates is easy. No special annotations, just plain JavaScript expressions.

    + + + +

    + +

    Starting code

    + +

    my-element.js

    + +
    import { LitElement, html } from '@polymer/lit-element'; 
+
+class MyElement extends LitElement {
+  static get properties(){
+    return {
+      message: { type: String },
+      myArray: { type: Array },
+      myBool: { type: Boolean }
+    };
+  }
+  constructor(){
+    super();
+    this.message='Hello world! From my-element';
+    
+    // Initialize myArray and myBool here.
+    
+  }
 
+  render(){
+    return html`
+      <p>${this.message}</p>
 
+      <!-- Add a loop and a conditional here. -->
+    `;
+  }
+}
+customElements.define('my-element', MyElement);
+
+
    + + + + + +

    + +

    Editing steps

    + +

    In this step, you’ll modify the element template to add:

    + +
      +
    • A loop using an array property.
      • +
    • An “if” statement using a boolean property.
      • +
    + +

    We’ve decleared the properties; all you need to do is initialize them and use them in markup.

    - +

    In my-element.js, add the initialization code to the constructor.

    -

    Write loops and conditionals with simple JavaScript expressions

    +

    my-element.js

    -
    +
    constructor(){
+  super();
+  this.message='Hello world! From my-element';
+  
+  // Initialize myArray and myBool here.
 
+}
+
    +

    Initialization code

    +
    this.myArray = ['an','array','of','test','data'];
+this.myBool = true;
+
    +

    In my-element.js, add a loop and a conditional to the element template in render.

    -

    Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions:

    +

    my-element.js

    render(){
   return html`
-    <ul>
-      ${this.myArray.map(i => html`<li>${i}</li>`)}
-    </ul>
-    ${this.myBool?
-      html`<p>Render some HTML if myBool is true</p>`:
-      html`<p>Render some other HTML if myBool is false</p>`}
+    <p>${this.message}</p>
+
+    <!-- Add a loop and a conditional here. -->
   `;
 }
    - +

    Code for loop

    + +
    <ul>
+  ${this.myArray.map(i => html`<li>${i}</li>`)}
+</ul>
+
    + +

    Code for conditional

    + +
    ${this.myBool?
+  html`<p>Render some HTML if myBool is true</p>`:
+  html`<p>Render some other HTML if myBool is false</p>`}
+
    + +

    + +

    Completed code

    + +

    my-element.js

    + +
    import { LitElement, html } from '@polymer/lit-element'; 
+
+class MyElement extends LitElement {
+  static get properties(){
+    return {
+      message: { type: String },
+      myArray: { type: Array },
+      myBool: { type: Boolean }
+    };
+  }
+  constructor(){
+    super();
+
+    this.message='Hello world! From my-element';
+    
+    // Initialize myArray and myBool here.
+    this.myArray = ['an','array','of','test','data'];
+    this.myBool = true;
+  }
+
+  render(){
+    return html`
+      <p>${this.message}</p>
+
+      <!-- Add a loop and a conditional here. -->
+      <ul>
+        ${this.myArray.map(i => html`<li>${i}</li>`)}
+      </ul>
+      ${this.myBool?
+        html`<p>Render some HTML if myBool is true</p>`:
+        html`<p>Render some other HTML if myBool is false</p>`}
+    `;
+  }
+}
+customElements.define('my-element', MyElement);
+
+
    + + +
    + + + -
    - - - << Use properties - - - - - Use event handlers >> - -
    +
    diff --git a/docs/_site/try/index.html b/docs/_site/try/index.html index 406a5ce4..bca059c0 100644 --- a/docs/_site/try/index.html +++ b/docs/_site/try/index.html @@ -1,6 +1,6 @@ - Try lit-element – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - -
    - + +

    - -

    Try lit-element

    -
    +

    Try LitElement! In this tutorial you’ll build your first web component, use it in a web page, and add style with CSS.

    +

    The tutorial pages contain live code samples that you can edit, like this:

    + + + +

    Click Preview at any time to see your code in action.

    -

    Build your first web component and use it in a web page.

    - -

    Try lit-element in live code samples without installing anything:

    +

    Follow the steps below to get started with LitElement:

    -

    If you’re ready to dive in, Set up lit-element locally to get started with your own development environment.

    +

    When you’re ready to dive in, follow this guide to Set up LitElement locally.

    +
    + + + + -
    - - - - - -
    +
    diff --git a/docs/_site/try/properties.html b/docs/_site/try/properties.html index 13b4e04f..7b3d6214 100644 --- a/docs/_site/try/properties.html +++ b/docs/_site/try/properties.html @@ -1,6 +1,6 @@ - Use properties in templates – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - Try lit-element - - + + +

    Declare and use properties

    -
    - +

    You can use your element’s properties in its template. LitElement automatically updates your element when its properties change.

    + + + +

    + +

    Starting code

    -

    Use properties in templates

    +

    my-element.js

    -
    +
    import { LitElement, html } from '@polymer/lit-element'; 
+
+class MyElement extends LitElement {
+  static get properties(){
+    return {
+      // Declare property here.
+    };
+  }
+  constructor(){
+    super();
+    // Initialize property here.
+  }
+  render(){
+    return html`
+      <!-- Add property here. -->
+      <p></p>
+    `;
+  }
+}
+customElements.define('my-element', MyElement);
 
+
    + + + +

    +

    Editing steps

    -

    To render property values in your element templates:

    +

    To create properties and use them in an element template:

      -
    • Declare your properties, for example, in a static getter.
      • -
    • Add properties to your template with JavaScript expressions.
      • -
    • You can initialize properties in the element constructor.
      • +
    • +

      Declare your properties.

      + +

      my-element.js

      + + 
      static get properties(){
+  return {
+    // Declare property here.
+  };
+}
+
      + +

      Declare a property

      + + 
      message: { type: String }
+
      +
      • +
    • +

      Initialize property values in the element constructor.

      + +

      my-element.js

      + + 
      constructor(){
+  super();
+  // Initialize property here.
+}
+
      + +

      Initialize the property

      + + 
      message: { type: String }
+
      +
      • +
    • +

      Add properties to your template with JavaScript expressions.

      + +

      my-element.js

      + + 
      render(){
+  return html`
+    <!-- Add property here. -->
+    <p></p>
+  `;
+}
+
      + +

      Use the property

      + + 
      <p>${this.message}</p>
+
      +
    -

    custom-element.js

    -
    class CustomElement extends LitElement {  
-  // Declare properties.
+
    
+
+
    Completed code
    
+
+
    my-element.js
    
+
+
    import { LitElement, html } from '@polymer/lit-element'; 
+
+class MyElement extends LitElement {
   static get properties(){
     return {
-      headingtext: { type: String }
+      // Declare property here.
+      message: { type: String }
     };
   }
   constructor(){
-    // Always call superconstructor when you override the constructor.
     super();
-
-    // You can initialize properties in the element constructor.
-    this.headingtext='Hello World!';
+    // Initialize property here.
+    this.message='Hello world! From my-element';
   }
+
   render(){
     return html`
-      <!-- Add properties to a template with JavaScript expressions. -->
-      <h1>${this.headingtext}</h1>
+      <!-- Add property here. -->
+      <p>${this.message}</p>
     `;
   }
 }
-
    
+customElements.define('my-element', MyElement);
 
-
    lit-element automatically observes and renders property changes.
    
+
    - + +
    + + + -
    - - - << Create an element - - - - - Write loops and conditionals >> - -
    +
    diff --git a/docs/_site/try/style.html b/docs/_site/try/style.html index ddda8755..d9ea099c 100644 --- a/docs/_site/try/style.html +++ b/docs/_site/try/style.html @@ -1,6 +1,6 @@ - Style an element template – lit-element docs + lit-element docs @@ -13,6 +13,7 @@ + - +
    - + + + + + + + + + +
    -
    - - - - - Try lit-element - - + -
    +

    Style your element template

    - -

    Style an element template

    +

    Style your element with CSS by including a style block in its template.

    -
    + +

    + +

    Starting code

    + +

    my-element.js

    + +
    import { LitElement, html } from '@polymer/lit-element'; 
+
+class MyElement extends LitElement {
+  static get properties(){
+    return {
+      message: { type: String },
+      myArray: { type: Array },
+      myBool: { type: Boolean }
+    };
+  }
+  constructor(){
+    super();
+    this.message='Hello world! From my-element';
+    this.myArray = ['an','array','of','test','data'];
+    this.myBool = true;
+  }
+
+  render(){
+    return html`
+      <!-- Add a style block here -->
+
+      <p>${this.message}</p>
+
+      <ul>${this.myArray.map(i => html`<li>${i}</li>`)}</ul>
+
+      <!-- Style this text --> 
+      <p>style me</p>
+      
+      <button @click="${(event) => this.clickHandler(event)}">Click</button>
+    `;
+  }
+  clickHandler(event){
+    console.log(event.target);
+    this.myBool = !this.myBool;
+  }
+}
+customElements.define('my-element', MyElement);
 
+
    + + + + + +

    + +

    Editing steps

    + +

    Add a style block to the element template in render:

    +

    my-element.js

    +
    render(){
+  return html`
+    <!-- Add a style block here -->
+    <p>${this.message}</p>
+    ...
+    ...
+  `;
+}
+
    + +

    Style block

    + +
    <style>
+  p {
+    font-family: Roboto;
+    font-size: 24px;
+    font-weight: 500;
+  }
+  .red {
+    color: red;
+  }
+  .blue {
+    color: blue;
+  }
+</style>
+
    -

    Style an element by including a style block in its template:

    +

    Apply the class styles to a paragraph in the element template. Use myBool to apply the styles conditionally.

    -

    custom-element.js

    +

    my-element.js

    render(){
   return html`
-    <style>
-      p { color: blue }
-    </style>
-    <p>hello world from custom-element</p>
+    ...
+    <!-- Style this text --> 
+    <p>style me</p>
+    ...
   `;
 }
    -

    Styles inside custom element templates are encapsulated. These styles will only affect elements inside the template-not the main document.

    +

    Apply the styles conditionally

    -

    index.html

    +
    <p class="${this.myBool?'red':'blue'}">style me</p>
+
    + +

    + +

    Completed code

    + +

    my-element.js

    + +
    import { LitElement, html } from '@polymer/lit-element'; 
+
+class MyElement extends LitElement {
+  static get properties(){
+    return {
+      message: { type: String },
+      myArray: { type: Array },
+      myBool: { type: Boolean }
+    };
+  }
+  constructor(){
+    super();
+    this.message='Hello world! From my-element';
+    this.myArray = ['an','array','of','test','data'];
+    this.myBool = true;
+  }
+
+  render(){
+    return html`
+      <!-- Add a style block here -->
+      <style>
+        p {
+          font-family: Roboto;
+          font-size: 24px;
+          font-weight: 500;
+        }
+        .red {
+          color: red;
+        }
+        .blue {
+          color: blue;
+        }
+      </style>
+
+      <p>${this.message}</p>
+
+      <ul>${this.myArray.map(i => html`<li>${i}</li>`)}</ul>
+
+      <!-- Style this text --> 
+      <p class="${myBool?'red':'blue'}">style me</p>
+      
+      <button @click="${(event) => this.clickHandler(event)}">Click</button>
+    `;
+  }
+  clickHandler(event){
+    console.log(event.target);
+    this.myBool = !this.myBool;
+  }
+}
+customElements.define('my-element', MyElement);
 
-
    <html>
-  <head>
-    <script type="module" src="./custom-element.js"></script>
-  </head>
-  <body>
-    <custom-element></custom-element>  
-    <p>A paragraph in the main document</p>      
-  </body>
-</html>
 
    
 
-
+
 
 
 
+
    Congratulations - you’ve made your first element with LitElement.
    
 
+
    Next steps
    
+
+
+
+
    
+
+  
+
+  
 
-
    
-  
-     
-    << Use event handlers
-    
-  
-  
-    
-  
 
    
 
 
+
    diff --git a/docs/_site/try/use.html b/docs/_site/try/use.html new file mode 100644 index 00000000..7f9eb904 --- /dev/null +++ b/docs/_site/try/use.html @@ -0,0 +1,231 @@ + + + lit-element docs + + + + + + + + + + + + + +
    + + + + + + + + + + + + +
    + + + +

    Use your element in a web page

    + + + + +

    You can now import your new element as a JavaScript module, and use it in markup.

    + + + +

    + +

    Starting code

    + +

    my-element.js

    + +
    <!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>
+    <!-- Add your element tags here -->
+  </body>
+</html>
+
+
    + + + + + +

    + +

    Editing steps

    + +

    If you’re working locally, here’s the syntax you’ll need to use:

    + +
    <head>
+  <script type="module" src="./my-element.js"></script>
+</head>
+<body>
+  <my-element></my-element>
+</body>
+
    + +

    In StackBlitz, scripts are managed slightly differently. In our live-editable code samples, a main script runs automatically and loads the module containing the custom element, so you won’t need a <script> tag for it in index.html.

    + +

    Add <my-element> tags to index.html:

    + +
      <body>
+    <!-- Add your element tags here -->
+    <my-element></my-element>
+  </body>
+
    + +

    + +

    Completed code

    + +

    index.html

    + +
    <!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>
+    <!-- Add your element tags here -->
+    <my-element></my-element>
+  </body>
+</html>
+
+
    + + + + + +
    + + + + + +
    + + + + +
    + +
    + + + + + + + diff --git a/docs/about.md b/docs/about.md new file mode 100644 index 00000000..267a33b2 --- /dev/null +++ b/docs/about.md @@ -0,0 +1,6 @@ +--- +layout: post +section: about +--- + +about diff --git a/docs/css/main.css b/docs/css/main.css index 0fc6d85f..3ae722e7 100644 --- a/docs/css/main.css +++ b/docs/css/main.css @@ -18,6 +18,19 @@ body { letter-spacing: 0.03em; } +.prevnext { + display: flex; + justify-content: space-between; +} +.next { + text-align: right; + order: 2 +} + +.prev { + order: 1 +} + hr { border: 0; height: 0; diff --git a/docs/docs/create/design.md b/docs/docs/create/design.md index a186420e..5c4f36ac 100644 --- a/docs/docs/create/design.md +++ b/docs/docs/create/design.md @@ -1,10 +1,28 @@ --- layout: post -title: Designing web components -parent: /docs/ -type: concept -topic: /docs/create -permalink: /docs/create/design +section: docs +topic: create +subtopic: design --- -TODO: Draft this page +These are some brief guidelines for designing extensible, performant, accessible elements. For more information, see the [Gold Standard Checklist for Web Components](https://github.com/webcomponents/gold-standard/wiki). + +### Do one thing well + +An element should **do one thing well**. It should have a clear, well-defined purpose. + +Instead of giving an element lots of options and features, provide and document properties and methods that other developers can extend for future use cases. + +Keeping your element as small as possible also minimizes its download time. + +### Optimize performance + +An element must be **fast**. If it isn't fast, it can't do its one thing well. + +Assess the speed of your element relative to its purpose. The more frequently end users will interact with your element, the faster it needs to be. + +The most important aspect of an element's performance is its initial rendering speed. For optimal performance, an element should lazily perform any tasks that aren't critical to the first render. + +### Design for accessibility + +Make sure your element is **accessible**. Use ARIA roles, states, and properties, or extend an accessible native HTML element. diff --git a/docs/docs/create/extend.md b/docs/docs/create/extend.md new file mode 100644 index 00000000..4dc3c784 --- /dev/null +++ b/docs/docs/create/extend.md @@ -0,0 +1,29 @@ +--- +layout: post +section: docs +topic: create +subtopic: extend +--- + +To add LitElement to your project, install it with npm: + +``` +npm install @polymer/lit-element --save +``` + +To create a new element: + +* Import the `LitElement` base class and the `html` helper function. +* Extend the `LitElement` base class. +* Implement `render` to define a template for your element. +* Register the new element with the browser. + +### Example + +_my-element.js_ + +```js +{% include projects/docs/create/my-element.js %} +``` + +{% include project.html folder="docs/create" openFile="my-element.js" forceEmbedLayout="true" view="editor" %} diff --git a/docs/docs/create/index.md b/docs/docs/create/index.md index 9e93390a..b2fb4ac7 100644 --- a/docs/docs/create/index.md +++ b/docs/docs/create/index.md @@ -1,37 +1,14 @@ --- layout: post -title: Create an element -parent: /docs/ -type: task -topic: /docs/create -permalink: /docs/create/index +section: docs +topic: create +subtopic: index --- -To add LitElement to your project: +To create a new element, [extend the LitElement base class](extend). -``` -npm install @polymer/lit-element --save -``` +Optionally, you can [use TypeScript decorators to create a new element](typescript). -To create a new element: +By default, LitElement attaches an open shadow root to the element and renders its template in shadow DOM. To customize where an element's template will render (for instance, to render into light DOM instead of shadow DOM), see [Customize an element's render root](renderroot). -* Import the `LitElement` base class and the `html` helper function. -* Extend the `LitElement` base class. -* Implement `render` to define a template for your element. -* Register the new element with the browser. - -### Example - -_my-element.js_ - -```js -{% include projects/docs/create/my-element.js %} -``` - -_index.html_ - -```html -{% include projects/docs/create/index.html %} -``` - -{% include project.html folder="docs/create" openFile="my-element.js" forceEmbedLayout="true" view="editor" %} +See [Designing an element](design) for basic guidelines on developing extensible, performant, accessible elements. diff --git a/docs/docs/create/renderroot.md b/docs/docs/create/renderroot.md index e8d69756..fd54288a 100644 --- a/docs/docs/create/renderroot.md +++ b/docs/docs/create/renderroot.md @@ -1,10 +1,8 @@ --- layout: post -title: Define an element's render root -parent: /docs/ -type: task -topic: /docs/create -permalink: /docs/create/renderroot +section: docs +topic: create +subtopic: renderroot --- diff --git a/docs/docs/create/typescript.md b/docs/docs/create/typescript.md index 6dba1f0f..c8914902 100644 --- a/docs/docs/create/typescript.md +++ b/docs/docs/create/typescript.md @@ -1,11 +1,14 @@ --- layout: post -title: Use typescript decorators to create an element class -parent: /docs/ -type: task -topic: /docs/create -permalink: /docs/create/typescript +section: docs +topic: create +subtopic: typescript --- -TODO: Draft this page +Use the `@customElement` TypeScript decorator to define your class as a custom element: +```ts +{% include projects/docs/typescript/my-element.ts %} +``` + +{% include project.html folder="docs/typescript" %} diff --git a/docs/docs/import.md b/docs/docs/import.md index f2cbab7e..0139b847 100644 --- a/docs/docs/import.md +++ b/docs/docs/import.md @@ -1,16 +1,44 @@ --- layout: post -title: Import an existing element -parent: /docs/ -type: task +section: docs +topic: import --- -Import and use a LitElement-based element in an HTML document or another element. +Import and use a LitElement-based element in an HTML document, or in another element. **On this page:** -* [Import and use a third-party element](#thirdparty) * [Import and use your own element](#own) +* [Import and use a third-party element](#thirdparty) + +### Import and use your own element + +In an HTML document: + +```html + + + + + + +``` + +In another LitElement-based element: + +```js +// Use relative paths for peer dependencies +import './my-element.js'; + +class MyOtherElement extends LitElement{ + render(){ + return html` + + `; + } +} +customElements.define('my-other-element', MyOtherElement); +``` @@ -58,32 +86,3 @@ customElements.define('existing-element', MyElement); - -### Import and use your own element - -In an HTML document: - -```html - - - - - - -``` - -In another LitElement-based element: - -```js -// Use relative paths for peer dependencies -import './my-element.js'; - -class MyOtherElement extends LitElement{ - render(){ - return html` - - `; - } -} -customElements.define('my-other-element', MyOtherElement); -``` diff --git a/docs/docs/index.md b/docs/docs/index.md index d224ba3c..1c9291ad 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -1,7 +1,6 @@ --- layout: post -title: API Documentation -type: contents +section: docs --- -TODO: Draft this page +Docs section index diff --git a/docs/docs/templates/annotations.md b/docs/docs/templates/annotations.md index 546ba35c..5d73c281 100644 --- a/docs/docs/templates/annotations.md +++ b/docs/docs/templates/annotations.md @@ -1,10 +1,8 @@ --- layout: post -title: Bind data to a child element in a template -parent: /docs/ -type: task -topic: /docs/templates -permalink: /docs/templates/annotations +section: docs +topic: templates +subtopic: annotations --- Use lit-element annotations with JavaScript expressions to bind data from an element's properties to a child element in its template. diff --git a/docs/docs/templates/compose.md b/docs/docs/templates/compose.md index 2a8d1294..3bf1490c 100644 --- a/docs/docs/templates/compose.md +++ b/docs/docs/templates/compose.md @@ -1,10 +1,8 @@ --- layout: post -title: Compose and nest lit-element templates -parent: /docs/ -type: task -topic: /docs/templates -permalink: /docs/templates/compose +section: docs +topic: templates +subtopic: compose --- You can compose LitElement templates from other LitElement templates: diff --git a/docs/docs/templates/design.md b/docs/docs/templates/design.md index af281184..3382897e 100644 --- a/docs/docs/templates/design.md +++ b/docs/docs/templates/design.md @@ -1,10 +1,8 @@ --- layout: post -title: Designing efficient LitElement templates -parent: /docs/ -type: concept -topic: /docs/templates -permalink: /docs/templates/design +section: docs +topic: templates +subtopic: design ---
    diff --git a/docs/docs/templates/expressions.md b/docs/docs/templates/expressions.md index c835b916..b7bf0750 100644 --- a/docs/docs/templates/expressions.md +++ b/docs/docs/templates/expressions.md @@ -1,9 +1,34 @@ --- layout: post -title: Use plain JavaScript expressions in a template -parent: /docs/ -type: task -topic: /docs/templates -permalink: /docs/templates/expressions +section: docs +topic: templates +subtopic: expressions --- +Use plain JavaScript expressions in a LitElement template to handle loops, conditionals, data binding, and composition. + +## Loops + +Iterate over an array: + +```js +html``; +``` + + +```js +render(){ + return html` +
      + ${myArray.map(i => html`
    • ${i}
      • `)} +
    + ${myBool? + html`

    Render some HTML if myBool is true

    `: + html`

    Render some other HTML if myBool is false

    `} + `; +} +``` + +## Conditionals diff --git a/docs/docs/templates/index.md b/docs/docs/templates/index.md index 4e36c921..1e9a03f0 100644 --- a/docs/docs/templates/index.md +++ b/docs/docs/templates/index.md @@ -1,9 +1,7 @@ --- layout: post -title: Write a template -parent: /docs/ -type: task -topic: /docs/templates -permalink: /docs/templates/index +section: docs +topic: templates +subtopic: index --- diff --git a/docs/docs/templates/slots.md b/docs/docs/templates/slots.md index e25eb97a..c77985ab 100644 --- a/docs/docs/templates/slots.md +++ b/docs/docs/templates/slots.md @@ -1,10 +1,8 @@ --- layout: post -title: Render light DOM children in a template -parent: /docs/ -type: task -topic: /docs/templates -permalink: /docs/templates/slots +section: docs +topic: templates +subtopic: slots --- On this page: diff --git a/docs/index.md b/docs/index.md index f5c41f61..61f73d90 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,7 +1,7 @@ --- layout: post -title: lit-element --- + DONE: Create skeleton TODO: Needs product manager input diff --git a/docs/projects/.DS_Store b/docs/projects/.DS_Store index 412b6e9896f97d83357992a7595e1853c3240079..21b6dd736ad956de0de6a5348028d294429891ce 100644 GIT binary patch literal 8196 zcmeHLTTC2P82vA0qFuQTh}6iP*9*;q@}uC3sD0p_kwO`cg8Ytc4oUXyObh| zm&c~Ydtzf^jL}5ui-|rM6OAu6>Wh)Ys?ir8eDK9rAB_IzoLNetJeU|I>730u|2h9< z{&T+hX3m}g0PM@^tpHU3AW>yf-ABzW3bV7it%Q6HGa|)q zfWUSH*ke-&2{6G1ee?OfB(DSwJo;tGB>`FL8Q^Yql({MeX|TBK7IOiQT}mvv>4fDZ zDBYKdv}L+pOUri{Dkv=4vsaR3NiLQj8DDS~$34x|}bPcv;J!-GxTAeZ@R)7G8EJ|}DIF2ByWFz`fiwR(BEt);su+SYd8N>g;X zwWZ@&Q?#SKdu2tID(hNLj+{*`U0i-*<;m9tUg*DbpmYmjt#xpK>tarwBGG0G-oG~eu>Ef!Ib&b;o1(-QwfWllA<+c3>4&GVY z(A?J5)4N_=QmQKDO2u@}bj^fiOfH(bw=k=@NyFAn``j4<&-Tp6Od}(g;pg&%t)&be z6|M|dOKPn&lTDcCv!=JSu9lP*AF2r}^EzdE*wI;(u6`)V+!Cz`hv%53KVwjt z-KiSxpff#8zRA^^z6X( - ${myArray.map(i => html`
  • ${i}
    • `)} - - ${myBool? - html`

    Render some HTML if myBool is true

    `: - html`

    Render some other HTML if myBool is false

    `} - `; -} -``` diff --git a/docs/projects/docs/tryexpressions/index.ts b/docs/projects/docs/tryexpressions/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/projects/docs/tryexpressions/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/projects/docs/tryexpressions/manifest.json b/docs/projects/docs/tryexpressions/manifest.json deleted file mode 100644 index d3c0108c..00000000 --- a/docs/projects/docs/tryexpressions/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "title": "lit-element code sample", - "description": "lit-element code sample", - "files": [ - "custom-element.js", - "index.html", - "index.ts", - "README.md" - ], - "dependencies": { - "@polymer/lit-element": "latest", - "@webcomponents/webcomponentsjs": "latest" - }, - "template": "typescript" -} diff --git a/docs/projects/docs/typescript/index.html b/docs/projects/docs/typescript/index.html new file mode 100644 index 00000000..af6b024d --- /dev/null +++ b/docs/projects/docs/typescript/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/projects/docs/typescript/index.ts b/docs/projects/docs/typescript/index.ts new file mode 100644 index 00000000..40cbb8d8 --- /dev/null +++ b/docs/projects/docs/typescript/index.ts @@ -0,0 +1 @@ +import './my-element.ts'; diff --git a/docs/projects/docs/typescript/manifest.json b/docs/projects/docs/typescript/manifest.json new file mode 100644 index 00000000..1a862572 --- /dev/null +++ b/docs/projects/docs/typescript/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "my-element.ts", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/projects/docs/typescript/my-element.ts b/docs/projects/docs/typescript/my-element.ts new file mode 100644 index 00000000..5ade03b1 --- /dev/null +++ b/docs/projects/docs/typescript/my-element.ts @@ -0,0 +1,32 @@ +/** + * Import LitElement base class, html helper function, + * and TypeScript decorators + **/ +import { + LitElement, html, customElement, property +} from '@polymer/lit-element'; + +/** + * Use the customElement decorator to define your class as + * a custom element. Registers as an HTML tag. + */ +@customElement('my-element') +export class MyElement extends LitElement { + + /** + * Create an observed property. Triggers update on change. + */ + @property() + foo = 'foo'; + + /** + * Implement `render` to define a template for your element. + */ + render(){ + /** + * Use JavaScript expressions to include property values in + * the element template. + */ + return html`

    ${this.foo}

    `; + } +} diff --git a/docs/projects/try/.DS_Store b/docs/projects/try/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..eb37db09997ebc3d6bb3a688fc63f0263db5930c GIT binary patch literal 14340 zcmeHOYit}>6+XwY-I;M5kAt($B;I6+aUEPISv$_dtrOPI#BGYB*omD-%$>Q9nS0NkbHDSQdkp~CmrZm4gaJUJlcnl%fJy}*M5+5=Hm4LYPD14dD8Kf{-RFM;bx0u|I5X1|qmDrC87kNxUkC9Pb4ESZV{R6G)! zP8wDw9DWxomQ_|&-z3ROjW&F{vTssdnKSg6k?D+)GOa^;+M;w)t+P(0W`^S_bAMWA z<>T>GGCO5jlWKiDnv7?Y(Tv`kOpY4&>efU?Kb>KBN32vj)6XkTs%qBK59n0S$ms)A z+nO-wb*!3-@`dHAf*WqWCA{s{&kQWouBcP%S1QU8BcYoa<8DJwADl4~nNx?OR$Mm| zhIw*4XIMrosgIe_DZL(FmgR*&sVN$##lIZs)wJX6%lo2M zW@K77saJ2(=W82R2L`EEhgn%~BEkA3HAglI1>|Con*zlPt!@8Jdf5&jsT!RPU1 zd<9>{*YFqk4lao9RWLPW$DJa{U-3Oh7EIjbWT9R)SzLslz>6e{H{oX_kLyepB$aB2 zlNsv}B?#8Ze5Y;mJziwKRM{4)RFfB{pZXH;CE!cImH?X{LUgh;VyE*WY;mFfGMVn%vXioVdR-Mv_oz9C?GzS#T0qrlN%}|hk zo!W(Xb-;*7{i`nlUjoGvU|heP?_b_|Am2YYIHc_TXngo2b4O3F z;}aLS!fv0OJK@61=H7SSyXL;I$E|17KwGm`2_7UTT|Zq&4Dy6Qy@|Qw(t<|rWiS-n zAd%y(+K(;4R*BewTEXA->9(MvE+ZnqS%DDeqQ7efQh|-z^*dZdQlWIeM%FIL!Q&028 zL?)@qv2oIY)J$J0YbGrIo>5UC(XSv+s@m*qXSlmP)Y-Xnu01r{5#F}7J+!T>du~pa z8e2Mc4WF1gbMNeZb681<5syN2$f_eblSc)Y~E5auMr3<6_;#O!N2f9+~Z*$!z~kW($a@V1P64PZIO~6tQ9Sw zF%J>rrF1bk*f8`F>7oZBT6vhL97K3#ezziB5-@=S3J_r#WC;^)Tr{x9 z=SBiM%Y_2hePH(TQGoPVU3y@a&9?52 zWncD#k&DWjhl%1aq|YSSs>FxSBp5dA+U;P&b7D`|R zWmH3qmJIHu)jwJ~aHEZ9HQ|OOU7k^v9lj5_i)*1iAXmJGkO-yuGuEQqJIatgl`tSI$L=DUjpww|7V&_IxbWjO78C|l$O1Bw{+unx7^)( zTPQU(#NQZ=KZ%Lx3;I^n#KgoHpYV^UF(EeoCHkN*J{pZCKIxg6Z9{MAgAXbRJITzM znRCv}nQyguIG74DhPXuNh0|JWK2Kpq&&}AVjFct z2t)`(2t)`(2t)|n8VJyt&6Bdsxi7U*86glMa9bk4_lG!TE|a00ky30ORER48$wKND ziRyF@5I*rxCPO(RrEsM&^Zzw2cC%?Eb z2TV#Cl@S6F0!tC#clRPNU<3lN7T@2CAw^vy;6Vng)Pz5ta=a9of0`P1Y(GdOzQ%$T zg+;|H6;)N#HR`FJQE#FrFoLY#W@JwC)=?uEO@;Md`Yf9KR?r!GuC{IXmxhI$ghLg@ZMqsr%PLF-w z^7{j8GT^lV-^&E;!f=?etZzMNk)55hI>_4Zw`n+T#!#JIy*^fX*Y-r?-g`Ud)~qdI zTA8-4FK7F9%CU}3*k&+#!tm3UYufIa0Rqwu>=E0_sHJ#S?RAYYYi>h%1=Ba`o0juZ zSe4SBP1$F&c5rTvtu0xzd5f+MniR@m&*Y<->>WiFnyM|jev)h2GZvMmqR60X^ld6L zlwO~rmOVSPohtLy-iPREiypl}+pREDJ?0oG%aL78TC>6qseL(#rtECd_A8}WtM;e8 zu`ybYFJ?}*>iQ6$x!drABjc7!QC*|yS$V~VPKxRT*R`4^k4dRY)<`l41k|czBIJew zI@Hmja{va3{o`;Eo`z@OS-1qR!xeZN-iJ@%8hi$y!*%!$euSUlSNIKnhdG8y>=Ld;pJNFP_37JdFmP!Ero`J_dLJAH~P;Nqh=lz*le< z-@rHVEqoWR;s^L4euQ7(mpCWmE12i<;V|A%;P+I?r)>Df77X2tva!zlv;+SSWxrj` zd0JX_$GY{Kt7>*MG_|xYJj%Q$cq5ercO*FkY34~G9^oQ3az^VL@6=+)h+EcV{#!85 zbGDMRNSV`#A+dO@QX#&uuvs13st~DJff(!VZ843lApWYNS+`S*u_B_XBAUB)YZ@yg zE=%p6X3`cDYo&JIe$oPe+f*@=Rvn`a^Pe;DGR(qz@G)`kI(!8`z)$cC{7I}U!V+Sg zj+-!sn{g}F;5OWjJMbQC3i;QG_hT0xBo6lCaqPzvIDl!ih=HSMV}=-*!wHIV_sJt^RDDGFV~ZC9nU>O{qt;H>=LzZ2?SQiC@T2<{9 literal 0 HcmV?d00001 diff --git a/docs/projects/try/create/README.md b/docs/projects/try/create/README.md deleted file mode 100644 index 932a89e2..00000000 --- a/docs/projects/try/create/README.md +++ /dev/null @@ -1,3 +0,0 @@ -## lit-element docs - -This is a code sample for the lit-element docs. diff --git a/docs/projects/try/create/after/index.html b/docs/projects/try/create/after/index.html new file mode 100644 index 00000000..a097c2fe --- /dev/null +++ b/docs/projects/try/create/after/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/projects/try/create/after/index.ts b/docs/projects/try/create/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/create/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/create/after/manifest.json b/docs/projects/try/create/after/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/projects/try/create/after/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" + } +} diff --git a/docs/projects/try/create/after/my-element.js b/docs/projects/try/create/after/my-element.js new file mode 100644 index 00000000..e0bcdebc --- /dev/null +++ b/docs/projects/try/create/after/my-element.js @@ -0,0 +1,14 @@ +// Import LitElement base class and html helper function +import { LitElement, html } from '@polymer/lit-element'; + +// Create your class here +class MyElement extends LitElement { + render(){ + // Define your element template here + return html` +

    Hello world! From my-element

    + `; + } +} +// Register the element with the browser +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/create/before/index.html b/docs/projects/try/create/before/index.html new file mode 100644 index 00000000..a097c2fe --- /dev/null +++ b/docs/projects/try/create/before/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/projects/try/create/before/index.ts b/docs/projects/try/create/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/create/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/create/before/manifest.json b/docs/projects/try/create/before/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/projects/try/create/before/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" + } +} diff --git a/docs/projects/try/create/before/my-element.js b/docs/projects/try/create/before/my-element.js new file mode 100644 index 00000000..f575ebfa --- /dev/null +++ b/docs/projects/try/create/before/my-element.js @@ -0,0 +1,12 @@ +// Import LitElement base class and html helper function +import { } from ''; + +// Create your class here +class MyElement { + render(){ + // Define your element template here + } +} + +// Register the element with the browser +customElements.define(); diff --git a/docs/projects/try/create/index.ts b/docs/projects/try/create/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/projects/try/create/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/projects/try/events/.DS_Store b/docs/projects/try/events/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..7c47070b6c731473e015ea0445f3bbb70b01cca0 GIT binary patch literal 6148 zcmeHKyG{c!5S)d8BGIIz^e^xSrzrV?`~ZX`Riu*w^jGD(_%vo8&FO>)1r3>%)?=@C zY%@)a7bi?W=SO`)vCp?q%+Q0~zv=(SB(0=?6!=#P*le{~E%~IXt&_)jt!?yYy61e--8c^lhbYIy jD92oQIev_!%xga9epfgo2A%Ps6ZJFTy2zx!Un}qhNLm_; literal 0 HcmV?d00001 diff --git a/docs/projects/try/events/README.md b/docs/projects/try/events/README.md deleted file mode 100644 index 23e0c9e2..00000000 --- a/docs/projects/try/events/README.md +++ /dev/null @@ -1,14 +0,0 @@ -## Add event listeners in plain HTML - -Use JavaScript expressions to add event listeners in plain HTML: - -```js -render(){ - return html` - - `; -} -clickHander(event){ - console.log(event.detail); -} -``` diff --git a/docs/projects/try/events/after/index.html b/docs/projects/try/events/after/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/projects/try/events/after/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/projects/try/events/after/index.ts b/docs/projects/try/events/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/events/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/events/after/manifest.json b/docs/projects/try/events/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/projects/try/events/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/projects/try/events/after/my-element.js b/docs/projects/try/events/after/my-element.js new file mode 100644 index 00000000..c97d83c9 --- /dev/null +++ b/docs/projects/try/events/after/my-element.js @@ -0,0 +1,41 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + + this.message='Hello world! From my-element'; + + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` +

    ${this.message}

    + +
      + ${this.myArray.map(i => html`
    • ${i}
      • `)} +
    + ${this.myBool? + html`

    Render some HTML if myBool is true

    `: + html`

    Render some other HTML if myBool is false

    `} + + + + `; + } + // Add an event handler here. + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/events/before/index.html b/docs/projects/try/events/before/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/projects/try/events/before/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/projects/try/events/before/index.ts b/docs/projects/try/events/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/events/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/events/before/manifest.json b/docs/projects/try/events/before/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/projects/try/events/before/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/projects/try/events/before/my-element.js b/docs/projects/try/events/before/my-element.js new file mode 100644 index 00000000..15655133 --- /dev/null +++ b/docs/projects/try/events/before/my-element.js @@ -0,0 +1,37 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + + this.message='Hello world! From my-element'; + + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` +

    ${this.message}

    + +
      + ${this.myArray.map(i => html`
    • ${i}
      • `)} +
    + ${this.myBool? + html`

    Render some HTML if myBool is true

    `: + html`

    Render some other HTML if myBool is false

    `} + + + + `; + } + // Add an event handler here. +} +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/events/custom-element.js b/docs/projects/try/events/custom-element.js deleted file mode 100644 index c10a5737..00000000 --- a/docs/projects/try/events/custom-element.js +++ /dev/null @@ -1,15 +0,0 @@ -import { LitElement, html } from '@polymer/lit-element'; - -class CustomElement extends LitElement { - render(){ - return html` -

    check the console

    - - `; - } - clickHandler(event){ - console.log(event.target.id + ' was clicked.'); - } -} - -customElements.define('custom-element', CustomElement); diff --git a/docs/projects/try/events/index.html b/docs/projects/try/events/index.html deleted file mode 100644 index 79284648..00000000 --- a/docs/projects/try/events/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - lit-element code sample - - - - - diff --git a/docs/projects/try/events/index.ts b/docs/projects/try/events/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/projects/try/events/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/projects/try/events/manifest.json b/docs/projects/try/events/manifest.json deleted file mode 100644 index d3c0108c..00000000 --- a/docs/projects/try/events/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "title": "lit-element code sample", - "description": "lit-element code sample", - "files": [ - "custom-element.js", - "index.html", - "index.ts", - "README.md" - ], - "dependencies": { - "@polymer/lit-element": "latest", - "@webcomponents/webcomponentsjs": "latest" - }, - "template": "typescript" -} diff --git a/docs/projects/try/expressions/.DS_Store b/docs/projects/try/expressions/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..55526b2f1782d6f32e5f85e503814a0604e2e883 GIT binary patch literal 8196 zcmeHLOKjXk82Wt(xy%NVzWs@3oR|(q)8u;c-Ky2;kB2w zH;;yt@HkSCcpZuWA%qYO7Y;ojBvf&Ls$39?6e__50SAP{l>-9)@i<{Ok8%T4JkrcJ zJOBUBj6Z+&>~8?TL|$(NPys-pDv+SAjLo#PWGs9CyWO;BTYE1=fty)1&9TG{F4N``(?rRy<|K z(QjhSjxL+I98$EE5pW;}Mrz#6rYt8#b6!tnEz|W{TIR8&v}{fJT7@x%ZD5ZkN1gGc zr+Ildq2om!T+R-dw(g84oV=~O z{ya%(@E025byHJqEuFDwTU*C;EIQTN(!L`WZQt2BJW3%fwMee9?y0>ljzOK0q8!I@gV$}mK9Sw9lO;o^8(@F^wFn#7|kDt!0ckzOiCMO|7a9=2PYqdDENZ^@`$;Zr-A@ zvpVhYsH2N0onKLyZ;5VE)ic7xBd>t8S~_bbEbMtaaDk_~I>Ga?^@*RVXE2KT;sRa2A9i#Y#f0 zi)?0FSCe=@NzIs0gkJdCIo~@Pxl7BuaH`K`CMJCTGN$ajDvWp*b1^+RdjE|W%!5$_Z7^; zwuPT} zk!we(4pS9H_{~W4L#Xl7aY8>GCk)bY-#1FGA|@W-j6@ot@{fNA2+x0FeerK+c>do! K|GZ_-|33kri(NGU literal 0 HcmV?d00001 diff --git a/docs/projects/try/expressions/README.md b/docs/projects/try/expressions/README.md deleted file mode 100644 index 36a075b5..00000000 --- a/docs/projects/try/expressions/README.md +++ /dev/null @@ -1,16 +0,0 @@ -## Use simple JavaScript expressions for loops and conditionals - -Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: - -```js -render(){ - return html` -
      - ${myArray.map(i => html`
    • ${i}
      • `)} -
    - ${myBool? - html`

    Render some HTML if myBool is true

    `: - html`

    Render some other HTML if myBool is false

    `} - `; -} -``` diff --git a/docs/projects/try/expressions/after/index.html b/docs/projects/try/expressions/after/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/projects/try/expressions/after/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/projects/try/expressions/after/index.ts b/docs/projects/try/expressions/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/expressions/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/expressions/after/manifest.json b/docs/projects/try/expressions/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/projects/try/expressions/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_site/projects/try/expressions/custom-element.js b/docs/projects/try/expressions/after/my-element.js similarity index 58% rename from docs/_site/projects/try/expressions/custom-element.js rename to docs/projects/try/expressions/after/my-element.js index a5a6b9ce..d1b89ecb 100644 --- a/docs/_site/projects/try/expressions/custom-element.js +++ b/docs/projects/try/expressions/after/my-element.js @@ -1,19 +1,28 @@ -import { LitElement, html } from '@polymer/lit-element'; +import { LitElement, html } from '@polymer/lit-element'; -class CustomElement extends LitElement { +class MyElement extends LitElement { static get properties(){ return { + message: { type: String }, myArray: { type: Array }, myBool: { type: Boolean } }; } constructor(){ super(); + + this.message='Hello world! From my-element'; + + // Initialize myArray and myBool here. this.myArray = ['an','array','of','test','data']; this.myBool = true; } + render(){ return html` +

    ${this.message}

    + +
      ${this.myArray.map(i => html`
    • ${i}
      • `)}
    @@ -23,5 +32,4 @@ class CustomElement extends LitElement { `; } } - -customElements.define('custom-element', CustomElement); +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/expressions/before/index.html b/docs/projects/try/expressions/before/index.html new file mode 100644 index 00000000..cf412668 --- /dev/null +++ b/docs/projects/try/expressions/before/index.html @@ -0,0 +1,16 @@ + + + + + + + + + lit-element code sample + + + + + + + diff --git a/docs/projects/try/expressions/before/index.ts b/docs/projects/try/expressions/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/expressions/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/expressions/before/manifest.json b/docs/projects/try/expressions/before/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/projects/try/expressions/before/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/projects/try/expressions/before/my-element.js b/docs/projects/try/expressions/before/my-element.js new file mode 100644 index 00000000..ba5ab840 --- /dev/null +++ b/docs/projects/try/expressions/before/my-element.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + + // Initialize myArray and myBool here. + + } + + render(){ + return html` +

    ${this.message}

    + + + `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/expressions/index.ts b/docs/projects/try/expressions/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/projects/try/expressions/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/projects/try/expressions/manifest.json b/docs/projects/try/expressions/manifest.json deleted file mode 100644 index d3c0108c..00000000 --- a/docs/projects/try/expressions/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "title": "lit-element code sample", - "description": "lit-element code sample", - "files": [ - "custom-element.js", - "index.html", - "index.ts", - "README.md" - ], - "dependencies": { - "@polymer/lit-element": "latest", - "@webcomponents/webcomponentsjs": "latest" - }, - "template": "typescript" -} diff --git a/docs/projects/try/properties/.DS_Store b/docs/projects/try/properties/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c9844b7500978084a707d2c19e6d3c5b4c383696 GIT binary patch literal 8196 zcmeHMTWl0n82V?7B+2=0;OyV2qgu#H>6N(!)|GT(q(pMXh)|r%gpQ+ zMUpD<8iVnYn25e0>O)Zz6BA>6;-VxP6Jq0qL?86U2Oo?^5}))xGgH#-MPp(LCUcTG z|2gNsoWI}s&YV3{0Kk@Y&QI0+1}G zVXsh|?g5@pG?4K?j{4GbrI`Nh0RvYIt{CXMlRnDLNyY;?>Pz1p(02z6X2#%#g5K=p z7xl~m4qNKqXtP7pBF~33rE(lBut7_YIN7ver77mkbk@)vHx~N_i{=%V%wHggQmI&4 zR$6*AF=UM-T*b{fEsC9DD-*h^r4_qZSKXncX0{tzUNgJwPQ}&iBiuMi-zdnyZ!778 zx;BzxOIj_{RdiFcy?B0%{$AZwt&tWhXR3~89|ZT>-HJOzafIslgHaD0Q4mv1K6R?0 zK2{rTXxM(bHhQW)wsmuDbnBMJ)2BsIkk{@$Fpzuv?5pQ4y!qDKm#=tkfWdnWD*XPf z`YN>w5SjSI!Yv9EGb~b}-pRN6P!_#16O?ktUa2$17Uv0!uB@wDrgKoU9g-nC!$`|vm`D_^u~wJi0kl*)cf z<eaG*glk%DjcQd8{G@8+^&(S*q(fQzBO9enB6Gy#Lqrm9L~f9_2uu}w z3?;1@{?In5QDFPT-n@^dKiDMg5-PA(?4x}(On;B#%^Yu*S>t zdF8Tp%IXl;HLEJmiAY!D)5JqStd7V0E*+&Z)X~AY2l{CzW#J4w2WR1VI0qNtBD@bD z!>4c!K7-HUI^2LC;3xPMeuLlPCj5y4F2&_oi85AU9d5!HHsTI!!kyTH`>+!qz%ESU zQ5?WysNf)G@dP^P;-mNkK8erZv-lFehGX~+zKieShj3#}3>} z98BUt?88HN7&E951BXyYn;4kK5j=^H;ThuLQ}{H#fG-jkU&hz*Jial7c^y-jcX2B7 z3eL3sJ?p0HC!K0D=>O?l%O`Bpu*^Yp00<|1hL>G| + + + + + + + + lit-element code sample + + + + + + + diff --git a/docs/projects/try/properties/after/index.ts b/docs/projects/try/properties/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/properties/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/properties/after/manifest.json b/docs/projects/try/properties/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/projects/try/properties/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/projects/try/properties/after/my-element.js b/docs/projects/try/properties/after/my-element.js new file mode 100644 index 00000000..2d847bec --- /dev/null +++ b/docs/projects/try/properties/after/my-element.js @@ -0,0 +1,23 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + // Declare property here. + message: { type: String } + }; + } + constructor(){ + super(); + // Initialize property here. + this.message='Hello world! From my-element'; + } + + render(){ + return html` + +

    ${this.message}

    + `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/properties/before/index.html b/docs/projects/try/properties/before/index.html new file mode 100644 index 00000000..1a1c0a6e --- /dev/null +++ b/docs/projects/try/properties/before/index.html @@ -0,0 +1,15 @@ + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/projects/try/properties/before/index.ts b/docs/projects/try/properties/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/properties/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/properties/before/manifest.json b/docs/projects/try/properties/before/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/projects/try/properties/before/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" + } +} diff --git a/docs/projects/try/properties/before/my-element.js b/docs/projects/try/properties/before/my-element.js new file mode 100644 index 00000000..60713723 --- /dev/null +++ b/docs/projects/try/properties/before/my-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + // Declare property here. + }; + } + constructor(){ + super(); + // Initialize property here. + } + render(){ + return html` + +

    + `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/properties/custom-element.js b/docs/projects/try/properties/custom-element.js deleted file mode 100644 index de47c3e0..00000000 --- a/docs/projects/try/properties/custom-element.js +++ /dev/null @@ -1,25 +0,0 @@ -import { LitElement, html } from '@polymer/lit-element'; - -class CustomElement extends LitElement { - // Declare properties. - static get properties(){ - return { - headingtext: { type: String } - }; - } - constructor(){ - // Always call superconstructor when you override the constructor. - super(); - - // You can initialize properties in the element constructor. - this.headingtext='Hello World!'; - } - render(){ - return html` - -

    ${this.headingtext}

    - `; - } -} - -customElements.define('custom-element', CustomElement); diff --git a/docs/projects/try/properties/index.ts b/docs/projects/try/properties/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/projects/try/properties/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/projects/try/properties/manifest.json b/docs/projects/try/properties/manifest.json deleted file mode 100644 index d3c0108c..00000000 --- a/docs/projects/try/properties/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "title": "lit-element code sample", - "description": "lit-element code sample", - "files": [ - "custom-element.js", - "index.html", - "index.ts", - "README.md" - ], - "dependencies": { - "@polymer/lit-element": "latest", - "@webcomponents/webcomponentsjs": "latest" - }, - "template": "typescript" -} diff --git a/docs/projects/try/style/.DS_Store b/docs/projects/try/style/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..446b727a2358e4aebfe10167dfb3d62e721cf60f GIT binary patch literal 8196 zcmeHMTWl0n82JvNO8{ zN=*&%8l&-&n0R?X-#|@FOpNgf74Z@iVk2sz5BlPR4@RSjPx_xZ(`L69jET`k=OpL+ z=bZoi=lt`{ch1>=767n4r#App1As)COSY7XITF|NJS&w1Ju65e*#l&CH)SOq$C@=Z z>AA#flIMsn26BrPXNbAFV}Sf=a6VmGj4QEA!YC6X*l@^blP zV#FCuc$$}U+qLX*-a4##BgvrNL!Tq2>ss=tX^alARUMA)X{K#tePdHMXvm3P)7G8Q zb|+`+u0KygDEx&6m^wDr7;CAIHa6}YuaAy3#G1C(N1JxEjE~Dw)y9V1-Gk|~=f=*D z-~YV834^l=$_sGg)fXriJ!Ro%lOn|&z!&S?e20LiZ1<>KzDSktaMJ13W~C}+w_WmRw9 zbj_q?92qrrZ=_#yQ--aZ_V6(R+V;#L)5yvdct!59wX`w0x~iI~Yt*&#SxKx$>dPg~ z(>c>SJIPj*FJHG_RZi&S%0Wlxv+3+jN%l20>s9qQ*K}kJDs@Q`PSvV)GSj3Um%J7| zTa;}wbLF1baDu5+KHns}`si;sX@6OV}|U5_ekrOR+H zoS@y2feY|BJONJ$73+}>J+>PzH9}nO?cnEv&B%Z=S)NmLxcp6>w@H{?<58u@t}!8@=y;9nQsjorA9IM{;k=5^0t-sPFhE4rtyRt?YA7u-~H=>P1l$|th6<=A}QsohZQ(gJHO z68=>4_`hrZ@Ba(T>(HGLfe?Ye69FvkOmw!>jPspZJl2j<9;D0@A2%VSZ$bqh!u$Pj noaFQ$hE$IRx_BTbgd`26fBZwhO@6Y5_kVc*PsOqS_51%1yv}=n literal 0 HcmV?d00001 diff --git a/docs/projects/try/style/README.md b/docs/projects/try/style/README.md deleted file mode 100644 index 932a89e2..00000000 --- a/docs/projects/try/style/README.md +++ /dev/null @@ -1,3 +0,0 @@ -## lit-element docs - -This is a code sample for the lit-element docs. diff --git a/docs/projects/try/style/after/index.html b/docs/projects/try/style/after/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/projects/try/style/after/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/projects/try/style/after/index.ts b/docs/projects/try/style/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/style/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/style/after/manifest.json b/docs/projects/try/style/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/projects/try/style/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/projects/try/style/after/my-element.js b/docs/projects/try/style/after/my-element.js new file mode 100644 index 00000000..34957ea8 --- /dev/null +++ b/docs/projects/try/style/after/my-element.js @@ -0,0 +1,50 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` + + + +

    ${this.message}

    + +
      ${this.myArray.map(i => html`
    • ${i}
      • `)}
    + + +

    style me

    + + + `; + } + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/style/before/index.html b/docs/projects/try/style/before/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/projects/try/style/before/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/projects/try/style/before/index.ts b/docs/projects/try/style/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/style/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/style/before/manifest.json b/docs/projects/try/style/before/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/projects/try/style/before/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/projects/try/style/before/my-element.js b/docs/projects/try/style/before/my-element.js new file mode 100644 index 00000000..c1dfee26 --- /dev/null +++ b/docs/projects/try/style/before/my-element.js @@ -0,0 +1,37 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` + + +

    ${this.message}

    + +
      ${this.myArray.map(i => html`
    • ${i}
      • `)}
    + + +

    style me

    + + + `; + } + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/style/custom-element.js b/docs/projects/try/style/custom-element.js deleted file mode 100644 index 2b7d187f..00000000 --- a/docs/projects/try/style/custom-element.js +++ /dev/null @@ -1,13 +0,0 @@ -import { LitElement, html } from '@polymer/lit-element'; - -class CustomElement extends LitElement { - render(){ - return html` - -

    hello world from custom-element

    - `; - } -} -customElements.define('custom-element', CustomElement); diff --git a/docs/projects/try/style/index.html b/docs/projects/try/style/index.html deleted file mode 100644 index 7377576f..00000000 --- a/docs/projects/try/style/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - lit-element code sample - - - -

    A paragraph in the main document

    - diff --git a/docs/projects/try/style/index.ts b/docs/projects/try/style/index.ts deleted file mode 100644 index 801d654d..00000000 --- a/docs/projects/try/style/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './custom-element.js'; diff --git a/docs/projects/try/style/manifest.json b/docs/projects/try/style/manifest.json deleted file mode 100644 index 7ee1f9ca..00000000 --- a/docs/projects/try/style/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "files": [ - "custom-element.js", - "index.html", - "index.ts", - "README.md" - ], - "title": "lit-element code sample", - "description": "lit-element code sample", - "template": "typescript", - "dependencies": { - "@polymer/lit-element": "latest", - "@webcomponents/webcomponentsjs": "latest" - } -} diff --git a/docs/projects/try/use/.DS_Store b/docs/projects/try/use/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..66331d9cf4c5433f87bf6f647aa0e1709e2e0271 GIT binary patch literal 8196 zcmeHMU2GLa6h5c4Wq0}Mv;yrS7jD{ADwJ|tsHLRf?VnO8LTsU>l$O1Bw{+unx7^)( zTPQU(#NQZ=KZ%Lx3;I^n#KgoHpYV^UF(EeoCHkN*J{pZCKIxg6Z9{MAgAXbRJITzM znRCv}nQyguIG74DhPXuNh0|JWK2Kpq&&}AVjFct z2t)`(2t)`(2t)|n8VJyt&6Bdsxi7U*86glMa9bk4_lG!TE|a00ky30ORER48$wKND ziRyF@5I*rxCPO(RrEsM&^Zzw2cC%?Eb z2TV#Cl@S6F0!tC#clRPNU<3lN7T@2CAw^vy;6Vng)Pz5ta=a9of0`P1Y(GdOzQ%$T zg+;|H6;)N#HR`FJQE#FrFoLY#W@JwC)=?uEO@;Md`Yf9KR?r!GuC{IXmxhI$ghLg@ZMqsr%PLF-w z^7{j8GT^lV-^&E;!f=?etZzMNk)55hI>_4Zw`n+T#!#JIy*^fX*Y-r?-g`Ud)~qdI zTA8-4FK7F9%CU}3*k&+#!tm3UYufIa0Rqwu>=E0_sHJ#S?RAYYYi>h%1=Ba`o0juZ zSe4SBP1$F&c5rTvtu0xzd5f+MniR@m&*Y<->>WiFnyM|jev)h2GZvMmqR60X^ld6L zlwO~rmOVSPohtLy-iPREiypl}+pREDJ?0oG%aL78TC>6qseL(#rtECd_A8}WtM;e8 zu`ybYFJ?}*>iQ6$x!drABjc7!QC*|yS$V~VPKxRT*R`4^k4dRY)<`l41k|czBIJew zI@Hmja{va3{o`;Eo`z@OS-1qR!xeZN-iJ@%8hi$y!*%!$euSUlSNIKnhdG8y>=Ld;pJNFP_37JdFmP!Ero`J_dLJAH~P;Nqh=lz*le< z-@rHVEqoWR;s^L4euQ7(mpCWmE12i<;V|A%;P+I?r)>Df77X2tva!zlv;+SSWxrj` zd0JX_$GY{Kt7>*MG_|xYJj%Q$cq5ercO*FkY34~G9^oQ3az^VL@6=+)h+EcV{#!85 zbGDMRNSV`#A+dO@QX#&uuvs13st~DJff(!VZ843lApWYNS+`S*u_B_XBAUB)YZ@yg zE=%p6X3`cDYo&JIe$oPe+f*@=Rvn`a^Pe;DGR(qz@G)`kI(!8`z)$cC{7I}U!V+Sg zj+-!sn{g}F;5OWjJMbQC3i;QG_hT0xBo6lCaqPzvIDl!ih=HSMV}=-*!wHIV_sJt^RDDGFV~ZC9nU>O{qt;H>=LzZ2?SQiC@T2<{9 literal 0 HcmV?d00001 diff --git a/docs/projects/try/use/after/index.html b/docs/projects/try/use/after/index.html new file mode 100644 index 00000000..9e5379a2 --- /dev/null +++ b/docs/projects/try/use/after/index.html @@ -0,0 +1,15 @@ + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/projects/try/use/after/index.ts b/docs/projects/try/use/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/use/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/use/after/manifest.json b/docs/projects/try/use/after/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/projects/try/use/after/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" + } +} diff --git a/docs/projects/try/use/after/my-element.js b/docs/projects/try/use/after/my-element.js new file mode 100644 index 00000000..ddcb66b3 --- /dev/null +++ b/docs/projects/try/use/after/my-element.js @@ -0,0 +1,14 @@ +// Import and extend the LitElement base class. +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + // Return your template from lit-element's `render` function. + render(){ + return html` + +

    Hello world! From my-element

    + `; + } +} +// Register the new element with the browser. +customElements.define('my-element', MyElement); diff --git a/docs/projects/try/use/before/index.html b/docs/projects/try/use/before/index.html new file mode 100644 index 00000000..ede65eea --- /dev/null +++ b/docs/projects/try/use/before/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/projects/try/use/before/index.ts b/docs/projects/try/use/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/projects/try/use/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/projects/try/use/before/manifest.json b/docs/projects/try/use/before/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/projects/try/use/before/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" + } +} diff --git a/docs/projects/try/use/before/my-element.js b/docs/projects/try/use/before/my-element.js new file mode 100644 index 00000000..ddcb66b3 --- /dev/null +++ b/docs/projects/try/use/before/my-element.js @@ -0,0 +1,14 @@ +// Import and extend the LitElement base class. +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + // Return your template from lit-element's `render` function. + render(){ + return html` + +

    Hello world! From my-element

    + `; + } +} +// Register the new element with the browser. +customElements.define('my-element', MyElement); diff --git a/docs/styleguide.md b/docs/styleguide.md index d6d16ab0..c04b134d 100644 --- a/docs/styleguide.md +++ b/docs/styleguide.md @@ -1,6 +1,6 @@ --- layout: post -title: lit-element style guide +section: styleguide --- ```text diff --git a/docs/tools/index.md b/docs/tools/index.md index bd0b0352..e3243c24 100644 --- a/docs/tools/index.md +++ b/docs/tools/index.md @@ -1,7 +1,8 @@ --- layout: post -title: Tools -parent: /tools/ +section: tools +topic: index +pageid: index --- See [Set up locally](setup) for detailed installation instructions. diff --git a/docs/tools/setup.md b/docs/tools/setup.md index 8457bd34..69f46a1d 100644 --- a/docs/tools/setup.md +++ b/docs/tools/setup.md @@ -1,7 +1,8 @@ --- layout: post -title: Set up lit-element locally -parent: /tools/ +section: tools +topic: setup +pageid: setup --- * [Install pre-requisites](#install) diff --git a/docs/try/create.md b/docs/try/create.md index f31bd7fa..42644653 100644 --- a/docs/try/create.md +++ b/docs/try/create.md @@ -1,30 +1,99 @@ --- layout: post -title: Create your first custom element -parent: /try/ -next: /try/properties -nexttitle: Add a property value to your template -type: task +section: try +topic: create --- -To create a new custom element with lit-element: +In this step, you'll fill in the gaps in the starting code to create an element class with a basic HTML template. -* Import and extend the `LitElement` base class. -* Define your element template inside lit-element's `render` function. -* Register the new element with the browser. +* [Starting code](#start) +* [Editing steps](#edit) +* [Completed code](#completed) -You can now import your element as a JavaScript module, and use it in markup. + -_custom-element.js_ +### Starting code + +_my-element.js_ ```js -{% include projects/try/create/custom-element.js %} +{% include projects/try/create/before/my-element.js %} ``` -_index.html_ +Click inside the following live sample to start editing. When you're ready to see your code in action, click the **Preview** button. + +{% include project.html folder="try/create/before" openFile="my-element.js" %} + + + +### Editing steps + +1. Import the `LitElement` base class and `html` helper function. + + _my-element.js_ + + ```js + // Import LitElement base class and html helper function + import { } from ''; + ``` + + _Import statements_ + + ```js + import { LitElement, html } from '@polymer/lit-element'; + ``` + +2. Create a class for your element that extends the LitElement base class, and define an element template inside the `render` function. + + _my-element.js_ + + ```js + // Create your class here + class MyElement { + render(){ + // Define your element template here + } + } + ``` + + _MyElement class_ -```html -{% include projects/try/create/index.html %} + ```js + class MyElement extends LitElement { + render(){ + return html` +

    Hello world! From my-element

    + `; + } + } + ``` + +3. Register the new element with the browser. + + _my-element.js_ + + ```js + // Register the element with the browser + customElements.define(); + ``` + + _Register element with the browser_ + + ```js + // Register the element with the browser + customElements.define('my-element', MyElement); + ``` + +     + +### Completed code + +_my-element.js_ + +```js +{% include projects/try/create/after/my-element.js %} ``` -{% include project.html folder="try/create" %} +{% include project.html folder="try/create/after" openFile="my-element.js" %} + +{% include prevnext.html prevurl="index" prevtitle="Try LitElement" nexturl="use" nexttitle="Use your element in a web page" %} diff --git a/docs/try/events.md b/docs/try/events.md index 395f40ed..42971c09 100644 --- a/docs/try/events.md +++ b/docs/try/events.md @@ -1,60 +1,86 @@ --- layout: post -title: Use event handlers in templates -parent: /try/ -next: /try/style -nexttitle: Style -prev: /try/expressions -prevtitle: Write loops and conditionals -type: task +section: try +topic: events +next: style --- -Use lit-html's `@event` notation to add an event handler to an element inside a template. For example: +Use lit-html's `@event` annotation to add an event listener to an element inside a template. -Print `click` events for a button to the console: +* [Starting code](#start) +* [Editing steps](#edit) +* [Completed code](#completed) + + + +### Starting code + +_my-element.js_ ```js -render(){ - return html` - - `; -} +{% include projects/try/events/before/my-element.js %} ``` -Send `click` events for a button to a method on your element: +{% include project.html folder="try/events/before" openFile="my-element.js" %} + + + +### Editing steps + +In the element template in `render`, annotate a ` + ... + + + `; } ``` -_custom-element.js_ -```js -import { LitElement, html } from '@polymer/lit-element'; +_Annotated button_ + +```html + +``` -class CustomElement extends LitElement { +To handle the event, add an event handler method to the MyElement class. + +_my-element.js_ + +```js +class MyElement extend LitElement { + ... render(){ - return html` -

    check the console

    - - `; - } - clickHandler(event){ - console.log(event.target.id + ' was clicked.'); + ... } + // Add an event handler here. } +``` + +_Event handler code_ -customElements.define('custom-element', CustomElement); +```js +clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; +} ``` -{% include project.html folder="try/events" openFile="custom-element.js" %} +     + +### Completed code + +_my-element.js_ + +```js +{% include projects/try/events/after/my-element.js %} +``` + +{% include project.html folder="try/events/after" openFile="my-element.js" %} + +{% include prevnext.html prevurl="expressions" prevtitle="Loops and conditionals" nexturl="style" nexttitle="Style your element" %} diff --git a/docs/try/expressions.md b/docs/try/expressions.md index 66e36326..ba0fbea1 100644 --- a/docs/try/expressions.md +++ b/docs/try/expressions.md @@ -1,27 +1,100 @@ --- layout: post -title: Write loops and conditionals with simple JavaScript expressions -parent: /try/ -next: /try/events -nexttitle: Use event handlers -prev: /try/props -prevtitle: Use properties -type: task +section: try +topic: expressions +next: events --- -Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: +Handling conditionals and loops in your LitElement templates is easy. No special annotations, just plain JavaScript expressions. + +* [Starting code](#start) +* [Editing steps](#edit) +* [Completed code](#completed) + + + +### Starting code + +_my-element.js_ + +```js +{% include projects/try/expressions/before/my-element.js %} +``` + +{% include project.html folder="try/expressions/before" openFile="my-element.js" %} + + + +### Editing steps + +In this step, you'll modify the element template to add: + +* A loop using an array property. +* An "if" statement using a boolean property. + +We've decleared the properties; all you need to do is initialize them and use them in markup. + +In _my-element.js_, add the initialization code to the constructor. + +_my-element.js_ + +```js +constructor(){ + super(); + this.message='Hello world! From my-element'; + + // Initialize myArray and myBool here. + +} +``` + +_Initialization code_ + +```js +this.myArray = ['an','array','of','test','data']; +this.myBool = true; +``` + +In _my-element.js_, add a loop and a conditional to the element template in `render`. + +_my-element.js_ ```js render(){ return html` -
      - ${this.myArray.map(i => html`
    • ${i}
      • `)} -
    - ${this.myBool? - html`

    Render some HTML if myBool is true

    `: - html`

    Render some other HTML if myBool is false

    `} +

    ${this.message}

    + + `; } ``` -{% include project.html folder="try/expressions" openFile="custom-element.js" %} +_Code for loop_ + +```js +
      + ${this.myArray.map(i => html`
    • ${i}
      • `)} +
    +``` + +_Code for conditional_ + +```js +${this.myBool? + html`

    Render some HTML if myBool is true

    `: + html`

    Render some other HTML if myBool is false

    `} +``` + +     + +### Completed code + +_my-element.js_ + +```js +{% include projects/try/expressions/after/my-element.js %} +``` + +{% include project.html folder="try/expressions/after" openFile="my-element.js" %} + +{% include prevnext.html prevurl="properties" prevtitle="Declare properties" nexturl="events" nexttitle="Add an event handler" %} diff --git a/docs/try/index.md b/docs/try/index.md index d9096b22..75c7c335 100644 --- a/docs/try/index.md +++ b/docs/try/index.md @@ -1,12 +1,17 @@ --- layout: post -title: Try lit-element -type: task +section: try --- -Build your first web component and use it in a web page. +Try LitElement! In this tutorial you'll build your first web component, use it in a web page, and add style with CSS. -Try lit-element in live code samples without installing anything: +The tutorial pages contain live code samples that you can edit, like this: + +{% include project.html folder="try/create/after" openFile="my-element.js" %} + +Click **Preview** at any time to see your code in action. + +Follow the steps below to get started with LitElement: * [Create your first custom element](create). * [Use your custom element in a web page](use). @@ -15,4 +20,6 @@ Try lit-element in live code samples without installing anything: * [Add an event handler to your template](events). * [Style your element template](style). -If you're ready to dive in, [Set up lit-element locally](/tools/setup) to get started with your own development environment. +When you're ready to dive in, follow this guide to [Set up LitElement locally](/tools/setup). + +{% include prevnext.html nexturl="create" nexttitle="Create your first custom element" %} diff --git a/docs/try/properties.md b/docs/try/properties.md index f1d698b4..813dac0c 100644 --- a/docs/try/properties.md +++ b/docs/try/properties.md @@ -1,45 +1,99 @@ --- layout: post -title: Use properties in templates -parent: /try/ -next: /try/expressions -nexttitle: Write loops and conditionals -prev: /try/create -prevtitle: Create an element -type: task +section: try +topic: properties +next: expressions --- -To render property values in your element templates: +You can use your element's properties in its template. LitElement automatically updates your element when its properties change. -* Declare your properties, for example, in a static getter. -* Add properties to your template with JavaScript expressions. -* You can initialize properties in the element constructor. +* [Starting code](#start) +* [Editing steps](#edit) +* [Completed code](#completed) + + + +### Starting code + +_my-element.js_ -**custom-element.js** ```js -class CustomElement extends LitElement { - // Declare properties. - static get properties(){ - return { - headingtext: { type: String } - }; - } - constructor(){ - // Always call superconstructor when you override the constructor. - super(); - - // You can initialize properties in the element constructor. - this.headingtext='Hello World!'; - } - render(){ - return html` - -

    ${this.headingtext}

    - `; - } -} +{% include projects/try/properties/before/my-element.js %} ``` -lit-element automatically observes and renders property changes. +{% include project.html folder="try/properties/before" openFile="my-element.js" %} + +     + +### Editing steps + +To create properties and use them in an element template: + +* Declare your properties. + + _my-element.js_ + + ```js + static get properties(){ + return { + // Declare property here. + }; + } + ``` + + _Declare a property_ + + ```js + message: { type: String } + ``` + +* Initialize property values in the element constructor. + + _my-element.js_ + + ```js + constructor(){ + super(); + // Initialize property here. + } + ``` + + _Initialize the property_ + + ```js + message: { type: String } + ``` + +* Add properties to your template with JavaScript expressions. + + _my-element.js_ + + ```js + render(){ + return html` + +

    + `; + } + ``` + + _Use the property_ + + ```js +

    ${this.message}

    + ``` + +     + +### Completed code + +_my-element.js_ + +```js +{% include projects/try/properties/after/my-element.js %} +``` + +{% include project.html folder="try/properties/after" openFile="my-element.js" %} + -{% include project.html folder="try/properties" openFile="custom-element.js" %} +{% include prevnext.html prevurl="use" prevtitle="Use your element in a web page" nexturl="expressions" nexttitle="Loops and conditionals" %} diff --git a/docs/try/style.md b/docs/try/style.md index 82668e2a..5007ae7f 100644 --- a/docs/try/style.md +++ b/docs/try/style.md @@ -1,41 +1,102 @@ --- layout: post -title: Style an element template -parent: /try/ -prev: /try/events -prevtitle: Use event handlers -type: task +section: try +topic: style --- -Style an element by including a `style` block in its template: +Style your element with CSS by including a `style` block in its template. -_custom-element.js_ +* [Starting code](#start) +* [Editing steps](#edit) +* [Completed code](#completed) + + + +### Starting code + +_my-element.js_ + +```js +{% include projects/try/style/before/my-element.js %} +``` + +{% include project.html folder="try/style/before" openFile="my-element.js" %} + + + +### Editing steps + +Add a style block to the element template in `render`: + +_my-element.js_ ```js render(){ return html` - -

    hello world from custom-element

    + +

    ${this.message}

    + ... + ... `; } ``` -Styles inside custom element templates are encapsulated. These styles will only affect elements inside the template-not the main document. +_Style block_ + +```html + +``` + +Apply the class styles to a paragraph in the element template. Use `myBool` to apply the styles conditionally. -_index.html_ +_my-element.js_ + +```js +render(){ + return html` + ... + +

    style me

    + ... + `; +} +``` + +_Apply the styles conditionally_ ```html - - - - - - -

    A paragraph in the main document

    - - +

    style me

    +``` + +     + +### Completed code + +_my-element.js_ + +```js +{% include projects/try/style/after/my-element.js %} ``` -{% include project.html folder="try/style" openFile="custom-element.js" %} +{% include project.html folder="try/style/after" openFile="my-element.js" %} + +Congratulations - you've made your first element with LitElement. + +Next steps + +* [Set up LitElement locally](/tools/setup) +* [View API documentation](/docs/index) + +{% include prevnext.html prevurl="events" prevtitle="Add an event handler" %} diff --git a/docs/try/use.md b/docs/try/use.md index e69de29b..323412b6 100644 --- a/docs/try/use.md +++ b/docs/try/use.md @@ -0,0 +1,64 @@ +--- +layout: post +section: try +topic: use +next: properties +--- + +You can now import your new element as a JavaScript module, and use it in markup. + +* [Starting code](#start) +* [Editing steps](#edit) +* [Completed code](#completed) + + + +### Starting code + +_my-element.js_ + +```js +{% include projects/try/use/before/index.html %} +``` + +{% include project.html folder="try/use/before" openFile="index.html" %} + + + +### Editing steps + +If you're working locally, here's the syntax you'll need to use: + +```html + + + + + + +``` + +**In StackBlitz, scripts are managed slightly differently.** In our live-editable code samples, a main script runs automatically and loads the module containing the custom element, so you won't need a ` + + + + + +
    +

    + lit-element docs +

    + + + + + +
    + + + + + \ No newline at end of file diff --git a/docs/build/gh-pages/src/index.js b/docs/build/gh-pages/src/index.js new file mode 100644 index 00000000..dbd2e393 --- /dev/null +++ b/docs/build/gh-pages/src/index.js @@ -0,0 +1,3 @@ +import './stack-blitz.js'; +import './project-loader.js'; +import './project-displayer.js'; \ No newline at end of file diff --git a/docs/build/gh-pages/src/project-displayer.bak b/docs/build/gh-pages/src/project-displayer.bak new file mode 100644 index 00000000..d113c3b6 --- /dev/null +++ b/docs/build/gh-pages/src/project-displayer.bak @@ -0,0 +1,132 @@ +import {LitElement, html} from '@polymer/lit-element'; +import './project-loader.js'; + +class ProjectDisplayer extends LitElement { + static get properties(){ + return { + folder: { type: String }, + + clickToLoad: { type: Boolean }, + forceEmbedLayout: { type: Boolean }, + view: { type: String }, + openFile: { type: String }, + height: { type: Number }, + + options: { type: Object }, + project: { type: Object } + }; + } + updateSelectedFile(i){ + var filenames = this.shadowRoot.getElementById('filenames').getElementsByClassName('filename'); + for (var el = 0; el < filenames.length; el++) { + console.log(filenames[el]); + filenames[el].className = 'filename'; + }; + var filecontents = this.shadowRoot.getElementById('filecontents').getElementsByClassName('filecontents'); + for (var el = 0; el < filecontents.length; el++) { + filecontents[el].className = 'filecontents'; + filecontents[el].style.display = 'none'; + }; + + this.shadowRoot.getElementById('filename-' + i).className += ' selected'; + this.shadowRoot.getElementById('contents-' + i).className += ' selected'; + this.shadowRoot.getElementById('contents-' + i).style.display = 'block'; + } + + constructor(){ + super(); + this.project={}; + } + render(){ + var filenames=[]; + if(this.project.files) var filenames=Object.keys(this.project.files); + return html` + + + +
    +
    ${filenames.map(i => html` + ${i} + `)} + +
    +
    ${filenames.map(i => html` +
    + 
    ${this.project.files[i]}
    +
    `)} +
    +
    + + `; + } + firstUpdated(){ + this.options=Object.assign({}, this.options, { + 'clickToLoad':this.clickToLoad, + 'forceEmbedLayout':this.forceEmbedLayout, + 'view':this.view?this.view:'both', + 'openFile':this.openFile?this.openFile:'index.html', + 'height':this.height?this.height:(window.innerHeight-10)/2 + }); + } + + toggle(){ + var dynamicsample = this.shadowRoot.getElementById("dynamicsample").style.display; + this.shadowRoot.getElementById("dynamicsample").style.display = + this.shadowRoot.getElementById("staticsample").style.display; + this.shadowRoot.getElementById("staticsample").style.display = dynamicsample; + + } + displayProject(project){ + this.project = Object.assign({}, project); + this.requestUpdate(); + this.embedProject(project); + this.shadowRoot.getElementById('toggle').disabled = false; + } + async embedProject(project){ + var slot = this.shadowRoot.getElementById("slot"); + var embed = slot.assignedNodes()[0]; + if(embed.tagName=='STACK-BLITZ'){ + return embed.embedProject(project, this.options); + } else console.log('Put in light DOM to embed a code sample.') + } +} + +customElements.define('project-displayer', ProjectDisplayer); diff --git a/docs/build/gh-pages/src/project-displayer.js b/docs/build/gh-pages/src/project-displayer.js new file mode 100644 index 00000000..c58b707f --- /dev/null +++ b/docs/build/gh-pages/src/project-displayer.js @@ -0,0 +1,83 @@ +import { LitElement, html } from "../node_modules/@polymer/lit-element/lit-element.js"; +import './project-loader.js'; + +class ProjectDisplayer extends LitElement { + static get properties() { + return { + folder: { + type: String + }, + clickToLoad: { + type: Boolean + }, + forceEmbedLayout: { + type: Boolean + }, + view: { + type: String + }, + openFile: { + type: String + }, + height: { + type: Number + }, + options: { + type: Object + }, + project: { + type: Object + } + }; + } + + constructor() { + super(); + this.project = {}; + } + + render() { + return html` + + + +
    + +
    + `; + } + + firstUpdated() { + this.options = Object.assign({}, this.options, { + 'clickToLoad': this.clickToLoad, + 'forceEmbedLayout': this.forceEmbedLayout, + 'view': this.view ? this.view : 'both', + 'openFile': this.openFile ? this.openFile : 'index.html', + 'height': this.height ? this.height : (window.innerHeight - 10) / 2 + }); + } + + displayProject(project) { + this.project = Object.assign({}, project); + this.requestUpdate(); + this.embedProject(project); + } + + async embedProject(project) { + var slot = this.shadowRoot.getElementById("slot"); + var embed = slot.assignedNodes()[0]; + + if (embed.tagName == 'STACK-BLITZ') { + return embed.embedProject(project, this.options); + } else console.log('Put in light DOM to embed a code sample.'); + } + +} + +customElements.define('project-displayer', ProjectDisplayer); \ No newline at end of file diff --git a/docs/build/gh-pages/src/project-loader.js b/docs/build/gh-pages/src/project-loader.js new file mode 100644 index 00000000..205d801d --- /dev/null +++ b/docs/build/gh-pages/src/project-loader.js @@ -0,0 +1,79 @@ +import { LitElement, html } from "../node_modules/@polymer/lit-element/lit-element.js"; +export class ProjectLoader extends LitElement { + static get properties() { + return { + folder: { + type: String + }, + project: { + type: Object + } + }; + } + + render() { + return html``; + } + + firstUpdated() { + this.project = {}; + this.loadProject(); + } + + loadProject() { + if (this.folder == 'undefined') { + console.log("Missing folder property."); + return; + } else console.log('loading', this.folder); + + fetch(`${this.folder}/manifest.json`).then(response => { + return response.json(); + }).then(manifest => { + return this.getFiles(manifest).then(filesArray => { + var filesObject = filesArray.reduce((prev, curr) => { + return Object.assign({}, prev, curr); + }); + this.project = Object.assign({}, manifest, { + files: filesObject + }); + var projectLoadedEvent = new CustomEvent('project-loaded', { + detail: { + project: this.project + }, + bubbles: true + }); + return projectLoadedEvent; + }).then(projectLoadedEvent => { + this.dispatchEvent(projectLoadedEvent); + }).catch(error => { + console.log(error); + }); + }).catch(error => { + console.log(error); + }); + } + + getFiles(manifest) { + return Promise.all(manifest.files.map(filename => { + return fetch(`${this.folder}/${filename}`).then(result => { + return result.text().then(r => { + return { + [filename]: this.uglyHack(r) + }; + }).catch(error => { + console.log(error); + }); + }); + })).catch(error => { + console.log(error); + }); + } + + uglyHack(r) { + var regex = /\.\.\//g; + return r.replace("../node_modules/", "").replace(regex, ""); + } + +} +; +customElements.define('project-loader', ProjectLoader); \ No newline at end of file diff --git a/docs/build/gh-pages/src/stack-blitz.js b/docs/build/gh-pages/src/stack-blitz.js new file mode 100644 index 00000000..451f324b --- /dev/null +++ b/docs/build/gh-pages/src/stack-blitz.js @@ -0,0 +1,75 @@ +import { LitElement, html } from "../node_modules/@polymer/lit-element/lit-element.js"; +import sdk from "../node_modules/@stackblitz/sdk/bundles/sdk.m.js"; +import "./project-loader.js"; + +class StackBlitz extends LitElement { + static get properties() { + return { + folder: { + type: String + }, + slot: { + type: String + }, + clickToLoad: { + type: Boolean + }, + forceEmbedLayout: { + type: Boolean + }, + view: { + type: String + }, + openFile: { + type: String + }, + height: { + type: Number + }, + options: { + type: Object + }, + project: { + type: Object + } + }; + } + + render() { + return html` + + ${this.slot == "embed" ? html`` : html` + + `} +
    + `; + } + + firstUpdated() { + this.options = Object.assign({}, this.options, { + 'clickToLoad': this.clickToLoad, + 'forceEmbedLayout': this.forceEmbedLayout, + 'view': this.view ? this.view : 'both', + 'openFile': this.openFile ? this.openFile : 'index.html', + 'height': this.height ? this.height : (window.innerHeight - 10) / 2 + }); + this.project = {}; + } + + embedProject(project, options) { + var embedIn = this.shadowRoot.getElementById('stackblitz'); + const vm = sdk.embedProject(embedIn, project, options); + } + +} + +; +customElements.define('stack-blitz', StackBlitz); \ No newline at end of file diff --git a/docs/build/polymer.json b/docs/build/polymer.json new file mode 100644 index 00000000..8f31bd7c --- /dev/null +++ b/docs/build/polymer.json @@ -0,0 +1,20 @@ +{ + "entrypoint": "src/index.html", + "fragments": [], + "sources": [ + "src/**/*", + "src/index.html" + ], + "extraDependencies": [ + "bower_components/webcomponentsjs/*.js" + ], + "builds": [ + { + "name": "gh-pages", + "bundled": false + } + ], + "npm": true, + "componentDir": "node_modules/", + "moduleResolution": "node" +} \ No newline at end of file From 97f5594ee8b6438cd30bd7d51aab1fd712828ee6 Mon Sep 17 00:00:00 2001 From: Kate Jeffreys Date: Tue, 16 Oct 2018 22:48:09 -0700 Subject: [PATCH 07/52] trying to fix 404 --- docs/try/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/try/index.md b/docs/try/index.md index 75c7c335..eda069cd 100644 --- a/docs/try/index.md +++ b/docs/try/index.md @@ -1,6 +1,7 @@ --- layout: post section: try +permalink: /try/ --- Try LitElement! In this tutorial you'll build your first web component, use it in a web page, and add style with CSS. From 99c0e22181e986d4ad4c7c9e8e03ca8bf48aa6e1 Mon Sep 17 00:00:00 2001 From: Kate Jeffreys Date: Wed, 17 Oct 2018 12:16:06 -0700 Subject: [PATCH 08/52] working through feedback chgs --- .gitignore | 1 + docs/.DS_Store | Bin 10244 -> 0 bytes docs/_includes/.DS_Store | Bin 6148 -> 0 bytes docs/_includes/article.html | 24 ++-- docs/_includes/prevnext.html | 24 ++-- docs/_includes/projects/.DS_Store | Bin 8196 -> 0 bytes docs/_includes/sectionnav.html | 28 ----- docs/_includes/tocnav.html | 12 +- docs/_includes/variables.html | 28 ----- docs/_introduction.md | 93 --------------- docs/_layouts/default.html | 8 +- docs/_layouts/post.html | 37 +++--- docs/_site/about.html | 75 ++---------- docs/_site/docs/create/design.html | 119 ++----------------- docs/_site/docs/create/extend.html | 119 ++----------------- docs/_site/docs/create/index.html | 119 ++----------------- docs/_site/docs/create/renderroot.html | 119 ++----------------- docs/_site/docs/create/typescript.html | 119 ++----------------- docs/_site/docs/import.html | 93 ++------------- docs/_site/docs/index.html | 93 ++------------- docs/_site/docs/templates/annotations.html | 123 ++----------------- docs/_site/docs/templates/compose.html | 123 ++----------------- docs/_site/docs/templates/design.html | 123 ++----------------- docs/_site/docs/templates/expressions.html | 123 ++----------------- docs/_site/docs/templates/index.html | 121 ++----------------- docs/_site/docs/templates/slots.html | 123 ++----------------- docs/_site/index.html | 75 +++--------- docs/_site/styleguide.html | 71 ++--------- docs/_site/tools/index.html | 75 ++---------- docs/_site/tools/setup.html | 75 ++---------- docs/_site/try/create.html | 101 +++------------- docs/_site/try/events.html | 101 +++------------- docs/_site/try/expressions.html | 101 +++------------- docs/_site/try/index.html | 97 +++------------ docs/_site/try/properties.html | 101 +++------------- docs/_site/try/style.html | 97 +++------------ docs/_site/try/use.html | 101 +++------------- docs/about.md | 2 +- docs/index.md | 4 +- docs/src/project-displayer.bak | 132 --------------------- docs/src/project-displayer.js | 30 ++--- docs/src/project-loader.js | 16 +-- docs/src/stack-blitz.js | 8 +- 43 files changed, 412 insertions(+), 2622 deletions(-) delete mode 100644 docs/.DS_Store delete mode 100644 docs/_includes/.DS_Store delete mode 100644 docs/_includes/projects/.DS_Store delete mode 100644 docs/_includes/sectionnav.html delete mode 100644 docs/_includes/variables.html delete mode 100644 docs/_introduction.md delete mode 100644 docs/src/project-displayer.bak diff --git a/.gitignore b/.gitignore index c802f0b8..5fc75f33 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,4 @@ lit-element.d.ts #Docs docs/node_modules +.DS_Store diff --git a/docs/.DS_Store b/docs/.DS_Store deleted file mode 100644 index feda488cae0e904da0afa0b9d0dfc370298fb78d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10244 zcmeHMYitx%6h5c4Wo9Vt6w9(LU0Erc)>2@%FDOvhZh1x!LR(s1mff9^4s3VJ&Tb3T zYJEhb;wuU!pvD*@Q8Y#n6HOE!KQzYpBoQ@Yj4>v@V*F$LVf5U4XP2eBMG`_lGn>pk zbMLul=H4^kJ>R)^0RRI@%?IEH0EsRp)gmf#{Ft6yS-(81rI;j=JwODKpn(o%Xeg_< z-C%pb_JHjH+XJ=-Y!6%s9w5$UKWUPXc4>RS_JHkyvmK+t5o6BDL5Q@Y?q@78?r0l2Og%&*=~f{-R#Be0aFt+fwJQuU{}y=N|TXn;PoeO^q!hBeFEj<7-{L zy?^h%;hRQoJ|w1xR)~O-G1EPqd#;)pj)Z8m%q)j1BIaPba7A7`<%-j3S16O5E6S8r zJw`Yd?J)M~y=sX`o>)!Q^>KZWX5Af*MUwqdvsWz*2P5HRB$&|KA`#Zv>`CZ*66|iX z8H*>{dBCH)(s?#Sk&C8$4!z|ey^CHe6(n4#f++&IrZ}w zx1E|?T%sydl(OzY!!$w>y=%zO5`CM3W>}AEMs&w!@@+I>+-T@=xfI`)JEOsV{ghf< zGTAZB>Fh~{jNM5iu~)58ne>W6Ozm|?nV3x&}JA3c_UdWyRzdMGT0gQ?4qTdUaJzov(S3 zKm8%ce7bYcl?f=0A^{T)pA|`9j;OER_heYT>E! zX--F5Kv7g+YfH`m-?-3w7LLJN1iLTc8~C0e_dCH22x`UX5+X!}j1iM`r!6**l9^8k+1iw4+F1#D>!TopuA0-eT<}iFl zKr9WsRVl~`iAQn+Z?GdCjl`lmNXsBwK+IthcO*bhMNwv703kXEHi%BN%;tPra4}*T zGqbUXh$qGmjeDV=-zCY8j*v4uNiYC$Qtl*0nBGR`%l}h;%9?4)4b0tH%75b~$BNRG zN>28;c%I4#FIj}8Vm2w2PEnK$@)^rZsb$O;H(xv!DLKj|BBL}hae|v(>BvD!EaJE; z9gfTxVzGkaanM>1N<5_S2P?G-1qM^*kwv^}p5kMRTtpnv)TlJGm7R(_qOnC;#KTHD zpz$%aE^#=Ws zVyBPc6ABhz!PjsGet_TLFZi1R2BLxvoJK+88k~u_P5*YdIz zmkE*QP*U}5Z_~o1=`T3u!(AjL3F;XS;p#+@$uO>Pxm_trVpYZCk{Km&9&veGwP`}C zo8wZ{2|T4@ROYK!TxtPNo>;YcK2c6SPp?>Y(PGjT@+^u!wM}W~xt7$(T+ z1i1l%oXHcTTXsS_`X{0i}u`^<4?QXiZ)5U(Q->8t>gbLP$we#b6s<7jD ze(pkT);Sf|`>lSXLUMDmH1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0    {{topic.title}} -{% if topic.toc %} +{%- if topic.toc -%}
    -

    {{subtopic.title}}

    -{%endif%} - - +

    {{subtopic.title}}

    +{%-endif-%} {{ content }} - - diff --git a/docs/_includes/prevnext.html b/docs/_includes/prevnext.html index 01bdc942..a8d57b04 100644 --- a/docs/_includes/prevnext.html +++ b/docs/_includes/prevnext.html @@ -1,16 +1,12 @@
    - - - - - - -
    \ No newline at end of file diff --git a/docs/_includes/projects/.DS_Store b/docs/_includes/projects/.DS_Store deleted file mode 100644 index 21b6dd736ad956de0de6a5348028d294429891ce..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8196 zcmeHLTTC2P82vA0qFuQTh}6iP*9*;q@}uC3sD0p_kwO`cg8Ytc4oUXyObh| zm&c~Ydtzf^jL}5ui-|rM6OAu6>Wh)Ys?ir8eDK9rAB_IzoLNetJeU|I>730u|2h9< z{&T+hX3m}g0PM@^tpHU3AW>yf-ABzW3bV7it%Q6HGa|)q zfWUSH*ke-&2{6G1ee?OfB(DSwJo;tGB>`FL8Q^Yql({MeX|TBK7IOiQT}mvv>4fDZ zDBYKdv}L+pOUri{Dkv=4vsaR3NiLQj8DDS~$34x|}bPcv;J!-GxTAeZ@R)7G8EJ|}DIF2ByWFz`fiwR(BEt);su+SYd8N>g;X zwWZ@&Q?#SKdu2tID(hNLj+{*`U0i-*<;m9tUg*DbpmYmjt#xpK>tarwBGG0G-oG~eu>Ef!Ib&b;o1(-QwfWllA<+c3>4&GVY z(A?J5)4N_=QmQKDO2u@}bj^fiOfH(bw=k=@NyFAn``j4<&-Tp6Od}(g;pg&%t)&be z6|M|dOKPn&lTDcCv!=JSu9lP*AF2r}^EzdE*wI;(u6`)V+!Cz`hv%53KVwjt z-KiSxpff#8zRA^^z6X( -{% for item in sections %} - {% if self.url == item[1].url %} -
  • {{item[1].title}}
    • - {% else %} -
  • {{item[1].title}}
    • - {%endif%} - {% include topicnav.html %} -{%endfor%} - diff --git a/docs/_includes/tocnav.html b/docs/_includes/tocnav.html index 63e932c6..65b19ac4 100644 --- a/docs/_includes/tocnav.html +++ b/docs/_includes/tocnav.html @@ -6,16 +6,16 @@ - {% for item in sections %} + {%- for item in sections -%}
  • {{item[1].title}} - {% if page.section == item[0] %} + {%- if page.section == item[0] -%}
      - {% for item in topics %} + {%- for item in topics -%}
    • {{item[1].title}}
      • - {%endfor%} + {%-endfor-%}
    - {%endif%} + {%- endif -%}
    • - {%endfor%} + {%- endfor -%} diff --git a/docs/_includes/variables.html b/docs/_includes/variables.html deleted file mode 100644 index 5ffdc778..00000000 --- a/docs/_includes/variables.html +++ /dev/null @@ -1,28 +0,0 @@ -{% assign title = "LitElement Documentation" %} -{% assign sections = site.data.site.toc %} -{% assign section = sections[page.section] %} -{% assign topics = section.toc %} -{% assign topic = topics[page.topic] %} -{% assign subtopics = topic.toc %} -{% assign subtopic = subtopics[page.subtopic] %} - -{% if subtopic %} - {% assign self = subtopic %} -{% elsif topic %} - {% assign self = topic %} -{% elsif section %} - {% assign self=section %} -{% else %} - {% assign self = site.data.site %} -{%endif%} - -
      -{% for item in sections %} - {% if self.url == item[1].url %} -
    • {{item[1].title}}
      • - {% else %} -
    • {{item[1].title}}
      • - {%endif%} - {% include topicnav.html %} -{%endfor%} -
    diff --git a/docs/_introduction.md b/docs/_introduction.md deleted file mode 100644 index 6efe01ad..00000000 --- a/docs/_introduction.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -layout: post -title: Introducing lit-element ---- - -lit-element is a light-weight library for creating custom elements with lit-html. - -Making custom elements is easy with lit-element: - -* [Write element templates in plain HTML.](introduction/) -* [React to property changes.](changes) -* [Use simple JavaScript expressions for loops and conditionals.](expressions) -* [Add event listeners in plain HTML.](listeners) - - - -## Write element templates in plain HTML - -Write your element templates in plain HTML. Use JavaScript expressions to insert data: - -```js -//custom-element.js - -render(){ - return html` -

    ${this.headingText}

    - `; -} -``` - - - -## React to property changes - -Create custom elements that update on property changes. lit-element creates DOM once, then re-renders only the stuff that changed - making DOM updates lightning-fast. - -```js -static get properties(){ - return { - myProp: String - } -} -constructor(){ - super(); - this.myProp='there'; - this.setTimeout(() => { - this.myProp='world'; - }, 3000); -} -render(){ - return html` -

    hello ${this.myProp}

    - `; -} -``` - - - -## Use simple JavaScript expressions for loops and conditionals - -Handling conditionals and loops in your lit-element templates is easy. No special annotations, just plain JavaScript expressions: - -```js -render(){ - return html` -
      - ${myArray.map(i => html`
    • ${i}
      • `)} -
    - ${myBool? - html`

    Render some HTML if myBool is true

    `: - html`

    Render some other HTML if myBool is false

    `} - `; -} -``` - - - - -## Add event listeners in plain HTML - -Use JavaScript expressions to add event listeners in plain HTML: - -```js -render({}){ - return html` - - `; -} -_clickHander(e){ - console.log(e.detail); -} -``` - diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index ca515d1d..8a30da70 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -1,19 +1,15 @@ - {% if page.title %}{{ page.title }} –{% endif %} {{ site.name }} - + {%- if page.title -%}{{ page.title }} –{%- endif -%} {{ site.name }} - - - - {{content}} -
    - - - - - +
    -