Lit Upgrade

lit-upgrade.md

Packages we're updating:

• @polymer/lit-element@^0.5.0 -> @polymer/[email protected]
• lit-html@^0.10.0: -> lit-html@^0.12.0

Documentation:

• lit-element: https://github.com/Polymer/lit-element#api-documentation
• lit-html: https://polymer.github.io/lit-html/guide/writing-templates

mtzwc components

• Update latest versions
• make sure to invoke super.firstUpdated() inside firstUpdate()
• make all properties reflect true

Bindings

NOTE: I'm not sure about quotes. I think you're fine to leave them.

• Should we have quotes?
• Prettier Suppport/Syntax Highlighting?

Passing in properties

From:

fieldText="label"

To:

.fieldText=${`label`}

You have to pass in a template expression. For example:

.fieldText=${'label'}
.fieldText="${'label'}"
.fieldText=${`label`}

are all valid. The value inside ${} can be any valid js value.

From:

html`<input value=${value}>`

to:

html`<input .value=${value}>`

Boolean attribute:

From:

html`<input disabled?="${disabled}">`

To:

html`<input ?disabled=${disabled}>`

Attributes:

From:

html`<div class$="${this.className}">`

To:

html`<div class=${this.className}>`

Event Listeners:

From:

html`on-click="${() => this.handleCancel()}”`

To:

html`<button @click=${(e) => console.log('clicked')}>Click Me</button>`

Methods

render()

From:

class MtzApp extends connect(store)(LitElement) {
  _render() {

To:

class MtzApp extends connect(store)(LitElement) {
  render() {

Please note: do NOT pass properties in as arguments to this method. This is unnecessary and redundant. We never should've been doing this in the first place.

From:

render({prop1, prop2}) {
  return html`${prop1} ${prop2}`;
}

To:

render() {
  return html`${this.prop1} ${this.prop2}`;
}

firstRendered()

From:

_firstRendered()

To:

firstUpdated(changedProperties)

_root()

From:

_root

To:

// if shadow dom
shadowRoot
// if light dom
querySelector

didRender()

TODO: No idea if this is right.

From:

_didRender()

To:

didRender()

_validate() || _anyMethod

_validate() is defined inside lit here: https://github.com/Polymer/lit-element/blob/b569cca68a9f2f0843f2b0536f36f3b005957bb8/src/lib/updating-element.ts#L533

Don't use single-underscore _protected for component-specific implementations. Either it's a private implementation detail of the component, or a public-facing method.

From:

_validate()

To:

__validate()

ready()

From:

ready() {
  // setting properties
  // other things (like grabbing dom references)
}

To:

constructor() {
  super();
  // setting properties
}

firstUpdated() {
  // other things (like grabbing dom references)
}

requestRender() -> update()

From:

this.requestRender()

To:

this.update()