Migration

// Lit 3 — user accessor is wrapped automatically
@property({type: Number})
set count(value: number) {
  this._count = value;
  // No need to call requestUpdate() — Lit does it
}
get count() {
  return this._count;
}

// Or with noAccessor: true, you remain responsible
@property({type: Number, noAccessor: true})
set count(value: number) {
  this._count = value;
  this.requestUpdate('count', this._count);
}

// Lit 2 — deprecated
@queryAssignedNodes('list', true, '.item')
listItems!: NodeListOf<HTMLElement>;

// Lit 3 — use @queryAssignedElements
@queryAssignedElements({slot: 'list', flatten: true, selector: '.item'})
listItems!: HTMLElement[];

// Lit 2
import 'lit-element/experimental-hydrate-support.js';

// Lit 3
import '@lit-labs/ssr-client/lit-element-hydrate-support.js';

// lit-element 2.x / Lit 1
import {LitElement, html, css} from 'lit-element';
import {property} from 'lit-element';

// Lit 2 / Lit 3
import {LitElement, html, css} from 'lit';
import {property} from 'lit/decorators.js';

npm install lit
npm uninstall lit-element lit-html

// lit-element 2.x
@internalProperty()
private _open = false;

// Lit 2+
import {state} from 'lit/decorators.js';

@state()
private _open = false;

import {customElement, property, state, query} from 'lit/decorators.js';
// or individually:
import {customElement} from 'lit/decorators/custom-element.js';
import {property} from 'lit/decorators/property.js';

// lit-element 2.x
import {UpdatingElement} from 'lit-element';

// Lit 2+
import {ReactiveElement} from '@lit/reactive-element';
// or
import {ReactiveElement} from 'lit';

// lit-element 2.x
protected _getUpdateComplete() {
  return super._getUpdateComplete();
}

// Lit 2+
protected override getUpdateComplete() {
  return super.getUpdateComplete();
}

// lit-element 2.x
await this.requestUpdate();

// Lit 2+
this.requestUpdate();
await this.updateComplete;

// lit-element 2.x
static getStyles() {
  return [...super.getStyles(), myStyles];
}

// Lit 2+
static finalizeStyles(styles) {
  return super.finalizeStyles([...styles, myStyles]);
}

// lit-html 1.x — rendered as "a b"
html`<div class=${['a', 'b']}></div>`;

// lit-html 2.x — renders as "a,b"
html`<div class=${['a', 'b']}></div>`;

// To get the old behavior:
html`<div class=${['a', 'b'].join(' ')}></div>`;