Demo

├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── 1-lit-html ├── scaffold.html └── solutions │ ├── 1-hello-world.html │ ├── 2-variables.html │ ├── 3-re-render.html │ ├── 4-render-array.html │ ├── 5-map-templates.html │ └── 6-event-listeners.html ├── 2-lit-element ├── assignments │ ├── 1-hello-world.html │ ├── 10-template-function.html │ ├── 2-fetch-first-article.html │ ├── 3-render-articles.html │ ├── 4-child-component.html │ ├── 5-read-toggle.html │ ├── 5b-upwards-data.html │ ├── 6-filter-articles.html │ ├── 7-styling.html │ ├── 8-polymer-components.html │ ├── 9-read-unread-counter.html │ ├── advanced:conditional-templates.html │ ├── advanced:directives.html │ ├── advanced:placeholder-content.html │ └── advanced:shared-styles.html └── solutions │ ├── 1-hello-world.html │ ├── 10-template-function.html │ ├── 2-fetch-first-article.html │ ├── 3-render-articles.html │ ├── 4-child-component.html │ ├── 5-read-toggle.html │ ├── 5b-upwards-data.html │ ├── 6-filter-articles.html │ ├── 7-styling.html │ ├── 8-polymer-components.html │ └── 9-read-unread-counter.html ├── README.md ├── index.html ├── package.json └── polymer-lit-cheatsheet.md /.eslintignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | node_modules/ 3 | _site/ 4 | dist/ 5 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | '@open-wc/eslint-config' 4 | ].map(require.resolve), 5 | plugins: ['lit'], 6 | rules: { 7 | 'import/no-unresolved': 'off', 8 | 'class-methods-use-this': 'off', 9 | 'lit/no-duplicate-template-bindings': 'error', 10 | 'lit/no-legacy-template-syntax': 'error', 11 | 'lit/no-template-bind': 'error', 12 | 'lit/no-template-map': 'off', 13 | 'lit/no-useless-template-literals': 'error', 14 | 'lit/attribute-value-entities': 'error', 15 | 'lit/binding-positions': 'error', 16 | 'lit/no-property-change-update': 'error', 17 | 'lit/no-invalid-html': 'error', 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | node_modules -------------------------------------------------------------------------------- /1-lit-html/scaffold.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /1-lit-html/solutions/1-hello-world.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /1-lit-html/solutions/2-variables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /1-lit-html/solutions/3-re-render.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /1-lit-html/solutions/4-render-array.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /1-lit-html/solutions/5-map-templates.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /1-lit-html/solutions/6-event-listeners.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /2-lit-element/assignments/1-hello-world.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /2-lit-element/assignments/10-template-function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /2-lit-element/assignments/2-fetch-first-article.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /2-lit-element/assignments/3-render-articles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /2-lit-element/assignments/4-child-component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /2-lit-element/assignments/5-read-toggle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /2-lit-element/assignments/5b-upwards-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /2-lit-element/assignments/6-filter-articles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /2-lit-element/assignments/7-styling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /2-lit-element/assignments/8-polymer-components.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /2-lit-element/assignments/9-read-unread-counter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /2-lit-element/assignments/advanced:conditional-templates.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /2-lit-element/assignments/advanced:directives.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /2-lit-element/assignments/advanced:placeholder-content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /2-lit-element/assignments/advanced:shared-styles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /2-lit-element/solutions/1-hello-world.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /2-lit-element/solutions/10-template-function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /2-lit-element/solutions/2-fetch-first-article.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /2-lit-element/solutions/3-render-articles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /2-lit-element/solutions/4-child-component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /2-lit-element/solutions/5-read-toggle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /2-lit-element/solutions/5b-upwards-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /2-lit-element/solutions/6-filter-articles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /2-lit-element/solutions/7-styling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /2-lit-element/solutions/8-polymer-components.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /2-lit-element/solutions/9-read-unread-counter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # lit-html workshop 2 | This repository was used for a lit-html workshop. We have since turned them into codelabs at: https://open-wc.org/codelabs/#web-components-basics 3 | 4 | Original [Slides](https://docs.google.com/presentation/d/1KVYiupSAoFyECDwJwxQlJTk8RvSzhg-UKGpZ8-nFm3I) 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Demo 7 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lit-html-workshop", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "http-server -o", 8 | "lint:eslint": "eslint --ext .js,.html .", 9 | "format:eslint": "eslint --ext .js,.html . --fix" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/LarsDenBakker/lit-html-workshop.git" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/LarsDenBakker/lit-html-workshop/issues" 19 | }, 20 | "homepage": "https://github.com/LarsDenBakker/lit-html-workshop#readme", 21 | "devDependencies": { 22 | "@open-wc/eslint-config": "^0.3.0", 23 | "eslint-plugin-lit": "^0.6.0", 24 | "http-server": "^0.11.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /polymer-lit-cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Polymer / lit-html comparison 2 | 3 | ## Define a component: 4 | 5 | Polymer requires a static `is` field, `LitElement` doesn't need it. 6 | 7 | Polymer: 8 | ```javascript 9 | class MyElement extends Polymer.Element { 10 | static get is() { 11 | return 'my-element'; 12 | } 13 | } 14 | 15 | customElements.define(MyElement.is, MyElement); 16 | ``` 17 | 18 | LitElement: 19 | 20 | ```javascript 21 | class MyElement extends LitElement { 22 | 23 | } 24 | 25 | customElements.define('my-element', MyElement); 26 | ``` 27 | 28 | ## Define a template and styles 29 | 30 | Polymer 2: 31 | ```html 32 | 33 | 39 | 40 | 49 | 50 | ``` 51 | 52 | Polymer 3: 53 | ```js 54 | import { PolymerElement, html } from '@polymer/element'; 55 | 56 | class MyElement extends PolymerElement { 57 | static get is() { 58 | return 'my-element'; 59 | } 60 | 61 | static get template() { 62 | return html` 63 | 69 | `; 70 | } 71 | } 72 | 73 | customElements.define(MyElement.is, MyElement); 74 | ``` 75 | 76 | LitElement: 77 | ```js 78 | import { LitElement, html } from 'lit-element'; 79 | 80 | class MyElement extends LitElement { 81 | static get styles() { 82 | return css` 83 | ... 84 | `; 85 | } 86 | render() { 87 | return html` 88 | ... 89 | `; 90 | } 91 | } 92 | 93 | customElements.define('my-element', MyElement); 94 | ``` 95 | 96 | ## Property binding (Polymer VS lit-html) 97 | MyElement has two properties: `users` and `menuItems` 98 | - Polymer: change name to kebab-case, wrap in `[[]]` 99 | - lit-html: use camelCase name, add a . in front, wrap in `${}` 100 | 101 | ```javascript 102 | html` 103 | 104 | 107 | 108 | 109 | 110 | 113 | 114 | `; 115 | ``` 116 | 117 | ## Attribute binding (Polymer VS lit-html) 118 | Attributes are set on the HTML element. in general you should set properties and only set attributes 119 | when you really need to for example to use it in CSS or for some native HTML elements 120 | 121 | - Polymer: like property binding, but add a `$` behind it 122 | - lit-html: like property binding, but without a `.` in front 123 | 124 | - for boolean attributes Polymer did some hidden magic for you. in lit-html you need to add a ? in front to set this behavior. This will add/remove the attribute based on a boolean value. 125 | ```javascript 126 | html` 127 | 128 | 129 | 132 | 133 | 134 |

135 | 138 | `; 139 | ``` 140 | 141 | ## Event listeners (Polymer VS lit-html) 142 | - Polymer: pass a string, polymer will try to find a function by that name your component 143 | - lit-html: pass (a reference to) the actual function which will be executed. This function can come from anywhere. 144 | ```javascript 145 | html` 146 | 147 | 150 | 151 | 152 | 153 | 156 | 157 | 158 | 161 | 162 | 163 | 166 | `; 167 | ``` 168 | --------------------------------------------------------------------------------