Guide for migrating Chromium WebUI components from Polymer to Lit.
IMPORTANT: Always do this first, as it automates trivial migration steps.
Run the script in this skill's scripts directory. Pass the path to the Polymer
based element's TS class definition file as the parameter. Example:
./webui-lit-migration/scripts/run_codemod_script.sh
chrome/browser/resources/certificate_manager/certificate_entry.ts
Replace PolymerElement import The script replaces this import except in cases where multiple things are imported from Polymer. If an import from polymer_bundled.min.js is still present after running the script, remove it and add: import {CrLitElement} from '//resources/lit/v3_0/lit.rollup.js';
Update 'extends PolymerElement' The script will update this in the case that no mixins are used. If there is still a reference to PolymerElement: replace SomeMixin(PolymerElement) with SomeMixinLit(CrLitElement)
Address any "TODO: Port this observer to Lit" comments left by the migration script as follows: a. Examine the observer (e.g. 'onFooChanged_') method. If it does not reference the DOM, add the following in a willUpdate callback. If it does reference the DOM (e.g., this.shadowRoot or this.$), add this in a updated() lifecycle callback instead.
if (changedProperties.has('foo')) {
this.onFooChanged_();
}
b. If the property being observed is protected or private, the
changedProperties lifecycle method parameter will require a cast:
const changedPrivateProperties = changedProperties as Map<PropertyKey, unknown>;
if (changedPrivateProperties.has('myProperty_')) { ... }
c. Remove the added TODO and the commented out observer line.