Polymer to Lit migration steps

Imports

1. [Automated] Replace PolymerElement import

Replace import {PolymerElement} from ‘//resources/polymer/v3_0/polymer/polymer_bundled.min.js’; with import {CrLitElement} from ‘//resources/lit/v3_0/lit.rollup.js’;

Automation does not handle cases where PolymerElement is imported along with other stuff in the same import.

2. [Automated] Replace ‘getTemplate’ import

Replace import {getTemplate} from ‘./cr_drawer.html.js’; with import {getCss} from ‘./cr_drawer.css.js’; import {getHtml} from ‘./cr_drawer.html.js’;

Methods

3. [Automated] Replace ‘getTemplate()’ calls.

Replace static get template() { return getTemplate(); } with static override get styles() { return getCss(); }

override render() { return getHtml.bind(this)(); }

4. [Automated] Update ‘extends PolymerElement’

Replace “extends PolymerElement” with “extends CrLitElement”

Automation does not cover cases where Mixins are used.

5. [Automated] Update ready() callbacks

Replace override ready() { super.ready(); ... } with override firstUpdated() { ... }

6. Convert ‘private’ methods referred by the HTML template to ‘protected’

Properties

7. [Automated] Update ‘properties’ getter

Replace static get properties() {...} with static override get properties() {...}

8. [Automated] Update ‘reflectToAttribute’ attribute

Replace ‘reflectToAttribute’ with ‘reflect’

9. [Automated] Update Polymer property shorthand syntax

Replace Polymer shorthand syntax heading: String, with heading: {type: String},

10. Comment out observers and add a TODO Replace observer: ‘onFooChanged_’, with // TODO: Port this observer to Lit // observer: ‘onFooChanged_’,

11. Move value initialization out of ‘properties’ to the declaration. Replace foo: { type: String, value: ‘foo’, }, ... value: string; with foo: { type: String, }, ... value: string = ‘foo’;

File structure

12. [Automated] Extract element-specific CSS styles to a dedicated CSS file.
13. [Automated] Remove CSS content from the HTML template.

Bindings

14. [Automated] Update event listeners syntax in HTML template

Equiavelent vim command s/on-([a-zA-Z]+)=“([a-zA-Z_]+)/@\1=”${this.\2}/g

15. Update property access syntax in HTML template

Replace [[...]] with ${this...}