diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
index ca68926..07f9a4a 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
@@ -184,7 +184,7 @@
         <gr-account-chip
           account="[[change.owner]]"
           change="[[change]]"
-          highlight-attention
+          highlightAttention
         ></gr-account-chip>
         <template is="dom-if" if="[[_pushCertificateValidation]]">
           <gr-tooltip-content
@@ -213,7 +213,7 @@
         <gr-account-chip
           account="[[_getNonOwnerRole(change, _CHANGE_ROLE.UPLOADER)]]"
           change="[[change]]"
-          highlight-attention
+          highlightAttention
         ></gr-account-chip>
       </span>
     </section>
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
index 25d8517..ca8bf87 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
@@ -66,7 +66,7 @@
           account="[[reviewer]]"
           change="[[change]]"
           on-remove="_handleRemove"
-          highlight-attention
+          highlightAttention
           voteable-text="[[_computeVoteableText(reviewer, change)]]"
           removable="[[_computeCanRemoveReviewer(reviewer, mutable)]]"
         >
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts
index 354d360..d3f23ad 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts
@@ -67,7 +67,7 @@
     await dialogShown;
   });
 
-  test('only show remove for removable reviewers', () => {
+  test('only show remove for removable reviewers', async () => {
     element.mutable = true;
     element.change = {
       ...createChange(),
@@ -112,7 +112,7 @@
         },
       ],
     };
-    flush();
+    await flush();
     const chips = element.root!.querySelectorAll('gr-account-chip');
     assert.equal(chips.length, 4);
 
diff --git a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts
index dab778b..5436128 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts
+++ b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts
@@ -17,19 +17,14 @@
 import '../gr-account-link/gr-account-link';
 import '../gr-button/gr-button';
 import '../gr-icons/gr-icons';
-import '../../../styles/shared-styles';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-account-chip_html';
-import {customElement, property} from '@polymer/decorators';
 import {AccountInfo, ChangeInfo} from '../../../types/common';
 import {appContext} from '../../../services/app-context';
+import {GrLitElement} from '../../lit/gr-lit-element';
+import {css, customElement, html, property} from 'lit-element';
+import {classMap} from 'lit-html/directives/class-map';
 
 @customElement('gr-account-chip')
-export class GrAccountChip extends PolymerElement {
-  static get template() {
-    return htmlTemplate;
-  }
-
+export class GrAccountChip extends GrLitElement {
   /**
    * Fired to indicate a key was pressed while this chip was focused.
    *
@@ -64,10 +59,10 @@
   @property({type: String})
   voteableText?: string;
 
-  @property({type: Boolean, reflectToAttribute: true})
+  @property({type: Boolean, reflect: true})
   disabled = false;
 
-  @property({type: Boolean, reflectToAttribute: true})
+  @property({type: Boolean, reflect: true})
   removable = false;
 
   /**
@@ -78,7 +73,7 @@
   @property({type: Boolean})
   highlightAttention = false;
 
-  @property({type: Boolean, reflectToAttribute: true})
+  @property({type: Boolean, reflect: true})
   showAvatar?: boolean;
 
   @property({type: Boolean})
@@ -86,18 +81,126 @@
 
   private readonly restApiService = appContext.restApiService;
 
-  /** @override */
-  ready() {
-    super.ready();
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          overflow: hidden;
+        }
+        .container {
+          align-items: center;
+          background-color: var(--background-color-primary);
+          /** round */
+          border-radius: var(--account-chip-border-radius, 20px);
+          border: 1px solid var(--border-color);
+          display: inline-flex;
+          padding: 0 1px;
+        }
+        :host:focus {
+          border-color: transparent;
+          box-shadow: none;
+          outline: none;
+        }
+        :host:focus .container,
+        :host:focus gr-button {
+          background: #ccc;
+        }
+        .transparentBackground,
+        gr-button.transparentBackground {
+          background-color: transparent;
+        }
+        :host([disabled]) {
+          opacity: 0.6;
+          pointer-events: none;
+        }
+        iron-icon {
+          height: 1.2rem;
+          width: 1.2rem;
+        }
+        .container gr-account-link::part(gr-account-link-text) {
+          color: var(--deemphasized-text-color);
+        }
+      `,
+    ];
+  }
+
+  render() {
+    // To pass CSS mixins for @apply to Polymer components, they need to appear
+    // in <style> inside the template.
+    const customStyle = html`
+      <style>
+        .container {
+          --account-label-padding-horizontal: 6px;
+        }
+        gr-button.remove {
+          --gr-remove-button-style: {
+            border-top-width: 0;
+            border-right-width: 0;
+            border-bottom-width: 0;
+            border-left-width: 0;
+            color: var(--deemphasized-text-color);
+            font-weight: var(--font-weight-normal);
+            height: 0.6em;
+            line-height: 10px;
+            /* This cancels most of the --account-label-padding-horizontal. */
+            margin-left: -4px;
+            padding: 0 2px 0 0;
+            text-decoration: none;
+          }
+        }
+
+        gr-button.remove:hover,
+        gr-button.remove:focus {
+          --gr-button: {
+            @apply --gr-remove-button-style;
+          }
+        }
+        gr-button.remove {
+          --gr-button: {
+            @apply --gr-remove-button-style;
+          }
+        }
+      </style>
+    `;
+    return html`${customStyle}
+      <div
+        class="${classMap({
+          container: true,
+          transparentBackground: this.transparentBackground,
+        })}"
+      >
+        <gr-account-link
+          .account="${this.account}"
+          .change="${this.change}"
+          ?force-attention=${this.forceAttention}
+          ?highlight-attention=${this.highlightAttention}
+          .voteable-text=${this.voteableText}
+        >
+        </gr-account-link>
+        <gr-button
+          id="remove"
+          link=""
+          ?hidden=${!this.removable}
+          aria-label="Remove"
+          class="${classMap({
+            remove: true,
+            transparentBackground: this.transparentBackground,
+          })}"
+          @click=${this._handleRemoveTap}
+        >
+          <iron-icon icon="gr-icons:close"></iron-icon>
+        </gr-button>
+      </div>`;
+  }
+
+  constructor() {
+    super();
     this._getHasAvatars().then(hasAvatars => {
       this.showAvatar = hasAvatars;
     });
   }
 
-  _getBackgroundClass(transparent: boolean) {
-    return transparent ? 'transparentBackground' : '';
-  }
-
   _handleRemoveTap(e: MouseEvent) {
     e.preventDefault();
     this.dispatchEvent(
diff --git a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip_html.ts b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip_html.ts
deleted file mode 100644
index 52a5985..0000000
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip_html.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * @license
- * Copyright (C) 2020 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import {html} from '@polymer/polymer/lib/utils/html-tag';
-
-export const htmlTemplate = html`
-  <style>
-    :host {
-      display: block;
-      overflow: hidden;
-    }
-    .container {
-      align-items: center;
-      background-color: var(--background-color-primary);
-      /** round */
-      border-radius: var(--account-chip-border-radius, 20px);
-      border: 1px solid var(--border-color);
-      display: inline-flex;
-      padding: 0 1px;
-
-      --account-label-padding-horizontal: 6px;
-    }
-    .container gr-account-link::part(gr-account-link-text) {
-      color: var(--deemphasized-text-color);
-    }
-    :host([show-avatar]) .container {
-    }
-    :host([removable]) .container {
-    }
-    gr-button.remove {
-      --gr-remove-button-style: {
-        border-top-width: 0;
-        border-right-width: 0;
-        border-bottom-width: 0;
-        border-left-width: 0;
-        color: var(--deemphasized-text-color);
-        font-weight: var(--font-weight-normal);
-        height: 0.6em;
-        line-height: 10px;
-        /* This cancels most of the --account-label-padding-horizontal. */
-        margin-left: -4px;
-        padding: 0 2px 0 0;
-        text-decoration: none;
-      }
-    }
-
-    gr-button.remove:hover,
-    gr-button.remove:focus {
-      --gr-button: {
-        @apply --gr-remove-button-style;
-      }
-    }
-    gr-button.remove {
-      --gr-button: {
-        @apply --gr-remove-button-style;
-      }
-    }
-    :host:focus {
-      border-color: transparent;
-      box-shadow: none;
-      outline: none;
-    }
-    :host:focus .container,
-    :host:focus gr-button {
-      background: #ccc;
-    }
-    .transparentBackground,
-    gr-button.transparentBackground {
-      background-color: transparent;
-    }
-    :host([disabled]) {
-      opacity: 0.6;
-      pointer-events: none;
-    }
-    iron-icon {
-      height: 1.2rem;
-      width: 1.2rem;
-    }
-  </style>
-  <div class$="container [[_getBackgroundClass(transparentBackground)]]">
-    <gr-account-link
-      account="[[account]]"
-      change="[[change]]"
-      force-attention="[[forceAttention]]"
-      highlight-attention="[[highlightAttention]]"
-      voteable-text="[[voteableText]]"
-    >
-    </gr-account-link>
-    <gr-button
-      id="remove"
-      link=""
-      hidden$="[[!removable]]"
-      hidden=""
-      aria-label="Remove"
-      class$="remove [[_getBackgroundClass(transparentBackground)]]"
-      on-click="_handleRemoveTap"
-    >
-      <iron-icon icon="gr-icons:close"></iron-icon>
-    </gr-button>
-  </div>
-`;