Polymer 3 to LitElement Migration

[KyleJu]

One thing is to keep in mind that when we choose tools/libraries, we want consistencies between wpt.fyi and Chromestatus

Polymer 3 -> LitElement 2.0 The Polymer 3 library has entered the maintenance mode and the new shiny LitElement is recommended for the development.

The good news for migrating to LitElement from Polymer 3 is:

Thanks to the interoperability of Web Components, elements built with Polymer 3.0 and LitElement can be mixed and matched in the same app, so once you have updated your project to Polymer 3.0, you can migrate to LitElement incrementally, one element at a time.

Things to look out for

• Binding syntax - Lit uses the native JavaScript binding syntax, whereas Polymer uses a custome HTML syntax.
• Two-way bindings - Lit-HTML only supports one-directional binding, passing down from the parent DOMs to the Children Doms, while Polymer3 supports two-way bindings. The upward data binding logic has to be replaced with interacting with the events and state
• Replace all the notify with dispatchEvent logic; computed with getter
• More native JavaScript features vs Polymer-specific syntax , e.g. dom-if is replaced with ${condition ? 'A' : 'B'}
• Migrate app-route to page.js, also per routing in Chromestatus

Web Component Tester -> Web Test Runner Web Component Testers is not being actively maintained anymore. The official recommended tool by Lit is Web Test Runner, which is also used by Chromestatus

Polymer-CLI -> Rollup The build tool needs to migrated to Rollup, similar to Chromestatus

Overall, we should see a significant downsizing and speed-up after this migration and bring the tech stack consistent between Chromestatus and wpt.fyi

[KyleJu]

@foolip

[jrobbins]

This would certainly be a big improvement.

Your list of things to look out for seems pretty complete.

You might need to spend some time upgrading other JS libraries or components, if you have old dependencies.

[KyleJu]

This would certainly be a big improvement.

Your list of things to look out for seems pretty complete.

You might need to spend some time upgrading other JS libraries or components, if you have old dependencies.

Looking the Chromestatus, shoelace is adopted for components over time

[justinfagnani]

👋 I'm one of the Lit maintainers and would love to help here if I can.

We have a Polymer to Lit migrations guide on lit.dev: https://lit.dev/articles/lit-for-polymer-users/#migrating

I could help porting elements, removing polyfills, etc.

[justinfagnani]

Re: Shoelace. I love that library, but unfortunately it bundles Lit, which adds some bloat from multiple copies of Lit, and removes the ability for the Shoelace components to use the dev builds we publish (via npm package export conditions). I hope that is resolved soon. It's a very nice and high-quality component set.

Material Web Components are also coming along and visually similar to the Paper elements.