Introduce Lit Element #1738
Introduce Lit Element #1738
Conversation
ghost
assigned
| <ha-progress-button id="progress" progress="[[progress]]" on-click="buttonTapped" disabled="[[disabled]]"><slot></slot></ha-progress-button> | ||
| `; | ||
| <ha-progress-button | ||
| .progress="${this.progress}" |
There was a problem hiding this comment.
Sets a property on the DOM element (in JS: el.progress = this.progress)
| `; | ||
| <ha-progress-button | ||
| .progress="${this.progress}" | ||
| @click="${() => this.buttonTapped()}" |
There was a problem hiding this comment.
Listen to events on this component (in JS: el.addEventListener('click', () => this.buttonTapped()))
| <ha-progress-button | ||
| .progress="${this.progress}" | ||
| @click="${() => this.buttonTapped()}" | ||
| ?disabled="${this.disabled}" |
There was a problem hiding this comment.
Toggle a boolean based attribute (in JS: el.toggleAttribute('disabled', this.disabled)`)
balloob
force-pushed
the
lit-element
branch
2 times, most recently
from
188ed9a to
8ed954d
Compare
| `; | ||
| <ha-progress-button | ||
| .progress="${this.progress}" | ||
| @click="${this._buttonTapped}" |
There was a problem hiding this comment.
Listen to events on this component (in JS: el.addEventListener('click', () => this.buttonTapped()))
|
I've removed the usage of eslint-plugin-lit because it was unable to distinguish between Polymer 3 and Lit Element templates, resulting in false positives (example). Raised an issue |
| value: false, | ||
| }, | ||
|
|
||
| hass: { }, |
There was a problem hiding this comment.
Why empty object here? Why not hass: Object? Is there a difference?
There was a problem hiding this comment.
Yes. Using a function will be used to serialize values when set as attributes. We don't want it to be serialized. See type: https://github.com/Polymer/lit-element#a-simple-base-class-for-creating-custom-elements-rendered-with-lit-html
Lit Element is the new base class from the Polymer team. It uses lit-html instead of the Polymer templating engine. Lit-html is faster and leaner.
This introduces lit-element and converts a component as an example. The class definition is very similar to Polymer.