diff --git a/polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list.ts b/polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list.ts
index 83063a1..f3f1139 100644
--- a/polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list.ts
+++ b/polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list.ts
@@ -15,16 +15,11 @@
  * limitations under the License.
  */
 
-import '../../../styles/gr-table-styles';
-import '../../../styles/shared-styles';
 import '../../shared/gr-dialog/gr-dialog';
 import '../../shared/gr-list-view/gr-list-view';
 import '../../shared/gr-overlay/gr-overlay';
 import '../gr-create-group-dialog/gr-create-group-dialog';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-admin-group-list_html';
 import {GerritNav} from '../../core/gr-navigation/gr-navigation';
-import {customElement, property, observe, computed} from '@polymer/decorators';
 import {AppElementAdminParams} from '../../gr-app-types';
 import {GrOverlay} from '../../shared/gr-overlay/gr-overlay';
 import {GroupId, GroupInfo, GroupName} from '../../../types/common';
@@ -32,6 +27,11 @@
 import {fireTitleChange} from '../../../utils/event-util';
 import {appContext} from '../../../services/app-context';
 import {SHOWN_ITEMS_COUNT} from '../../../constants/constants';
+import {tableStyles} from '../../../styles/gr-table-styles';
+import {sharedStyles} from '../../../styles/shared-styles';
+import {LitElement, PropertyValues, html} from 'lit';
+import {customElement, query, property, state} from 'lit/decorators';
+import {assertIsDefined} from '../../../utils/common-util';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -39,18 +39,13 @@
   }
 }
 
-export interface GrAdminGroupList {
-  $: {
-    createOverlay: GrOverlay;
-    createNewModal: GrCreateGroupDialog;
-  };
-}
-
 @customElement('gr-admin-group-list')
-export class GrAdminGroupList extends PolymerElement {
-  static get template() {
-    return htmlTemplate;
-  }
+export class GrAdminGroupList extends LitElement {
+  readonly path = '/admin/groups';
+
+  @query('#createOverlay') private createOverlay?: GrOverlay;
+
+  @query('#createNewModal') private createNewModal?: GrCreateGroupDialog;
 
   @property({type: Object})
   params?: AppElementAdminParams;
@@ -58,135 +53,200 @@
   /**
    * Offset of currently visible query results.
    */
-  @property({type: Number})
-  _offset = 0;
+  @state() private offset = 0;
 
-  @property({type: String})
-  readonly _path = '/admin/groups';
+  @state() private hasNewGroupName = false;
 
-  @property({type: Boolean})
-  _hasNewGroupName = false;
+  @state() private createNewCapability = false;
 
-  @property({type: Boolean})
-  _createNewCapability = false;
+  // private but used in test
+  @state() groups: GroupInfo[] = [];
 
-  @property({type: Array})
-  _groups: GroupInfo[] = [];
+  @state() private groupsPerPage = 25;
 
-  /**
-   * Because  we request one more than the groupsPerPage, _shownGroups
-   * may be one less than _groups.
-   * */
-  @computed('_groups')
-  get _shownGroups() {
-    return this._groups.slice(0, SHOWN_ITEMS_COUNT);
-  }
+  // private but used in test
+  @state() loading = true;
 
-  @property({type: Number})
-  _groupsPerPage = 25;
-
-  @property({type: Boolean})
-  _loading = true;
-
-  @property({type: String})
-  _filter = '';
+  @state() private filter = '';
 
   private readonly restApiService = appContext.restApiService;
 
   override connectedCallback() {
     super.connectedCallback();
-    this._getCreateGroupCapability();
+    this.getCreateGroupCapability();
     fireTitleChange(this, 'Groups');
-    this._maybeOpenCreateOverlay(this.params);
   }
 
-  @observe('params')
-  _paramsChanged(params: AppElementAdminParams) {
-    this._loading = true;
-    this._filter = params?.filter ?? '';
-    this._offset = Number(params?.offset ?? 0);
+  static override get styles() {
+    return [tableStyles, sharedStyles];
+  }
 
-    return this._getGroups(this._filter, this._groupsPerPage, this._offset);
+  override render() {
+    return html`
+      <gr-list-view
+        .createNew=${this.createNewCapability}
+        .filter=${this.filter}
+        .items=${this.groups}
+        .itemsPerPage=${this.groupsPerPage}
+        .loading=${this.loading}
+        .offset=${this.offset}
+        .path=${this.path}
+        @create-clicked=${() => this.handleCreateClicked()}
+      >
+        <table id="list" class="genericList">
+          <tbody>
+            <tr class="headerRow">
+              <th class="name topHeader">Group Name</th>
+              <th class="description topHeader">Group Description</th>
+              <th class="visibleToAll topHeader">Visible To All</th>
+            </tr>
+            <tr
+              id="loading"
+              class="loadingMsg ${this.loading ? 'loading' : ''}"
+            >
+              <td>Loading...</td>
+            </tr>
+          </tbody>
+          <tbody class=${this.loading ? 'loading' : ''}>
+            ${this.groups
+              .slice(0, SHOWN_ITEMS_COUNT)
+              .map(group => this.renderGroupList(group))}
+          </tbody>
+        </table>
+      </gr-list-view>
+      <gr-overlay id="createOverlay" with-backdrop>
+        <gr-dialog
+          id="createDialog"
+          class="confirmDialog"
+          ?disabled=${!this.hasNewGroupName}
+          confirm-label="Create"
+          confirm-on-enter
+          @confirm=${() => this.handleCreateGroup()}
+          @cancel=${() => this.handleCloseCreate()}
+        >
+          <div class="header" slot="header">Create Group</div>
+          <div class="main" slot="main">
+            <gr-create-group-dialog
+              id="createNewModal"
+              @has-new-group-name=${this.handleHasNewGroupName}
+            ></gr-create-group-dialog>
+          </div>
+        </gr-dialog>
+      </gr-overlay>
+    `;
+  }
+
+  private renderGroupList(group: GroupInfo) {
+    return html`
+      <tr class="table">
+        <td class="name">
+          <a href=${this.computeGroupUrl(group.id)}>${group.name}</a>
+        </td>
+        <td class="description">${group.description}</td>
+        <td class="visibleToAll">
+          ${group.options?.visible_to_all === true ? 'Y' : 'N'}
+        </td>
+      </tr>
+    `;
+  }
+
+  override willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has('params')) {
+      this.paramsChanged();
+    }
+  }
+
+  // private but used in test
+  paramsChanged() {
+    this.filter = this.params?.filter ?? '';
+    this.offset = Number(this.params?.offset ?? 0);
+    this.maybeOpenCreateOverlay(this.params);
+
+    return this.getGroups(this.filter, this.groupsPerPage, this.offset);
   }
 
   /**
    * Opens the create overlay if the route has a hash 'create'
+   *
+   * private but used in test
    */
-  _maybeOpenCreateOverlay(params?: AppElementAdminParams) {
+  maybeOpenCreateOverlay(params?: AppElementAdminParams) {
     if (params?.openCreateModal) {
-      this.$.createOverlay.open();
+      assertIsDefined(this.createOverlay, 'createOverlay');
+      this.createOverlay.open();
     }
   }
 
   /**
    * Generates groups link (/admin/groups/<uuid>)
+   *
+   * private but used in test
    */
-  _computeGroupUrl(id: string) {
+  computeGroupUrl(id: string) {
     return GerritNav.getUrlForGroup(decodeURIComponent(id) as GroupId);
   }
 
-  _getCreateGroupCapability() {
+  private getCreateGroupCapability() {
     return this.restApiService.getAccount().then(account => {
-      if (!account) {
-        return;
-      }
+      if (!account) return;
       return this.restApiService
         .getAccountCapabilities(['createGroup'])
         .then(capabilities => {
           if (capabilities?.createGroup) {
-            this._createNewCapability = true;
+            this.createNewCapability = true;
           }
         });
     });
   }
 
-  _getGroups(filter: string, groupsPerPage: number, offset?: number) {
-    this._groups = [];
+  private getGroups(filter: string, groupsPerPage: number, offset?: number) {
+    this.groups = [];
+    this.loading = true;
     return this.restApiService
       .getGroups(filter, groupsPerPage, offset)
       .then(groups => {
-        if (!groups) {
-          return;
-        }
-        this._groups = Object.keys(groups).map(key => {
+        if (!groups) return;
+        this.groups = Object.keys(groups).map(key => {
           const group = groups[key];
           group.name = key as GroupName;
           return group;
         });
-        this._loading = false;
+      })
+      .finally(() => {
+        this.loading = false;
       });
   }
 
-  _refreshGroupsList() {
+  private refreshGroupsList() {
     this.restApiService.invalidateGroupsCache();
-    return this._getGroups(this._filter, this._groupsPerPage, this._offset);
+    return this.getGroups(this.filter, this.groupsPerPage, this.offset);
   }
 
-  _handleCreateGroup() {
-    this.$.createNewModal.handleCreateGroup().then(() => {
-      this._refreshGroupsList();
+  // private but used in test
+  handleCreateGroup() {
+    assertIsDefined(this.createNewModal, 'createNewModal');
+    this.createNewModal.handleCreateGroup().then(() => {
+      this.refreshGroupsList();
     });
   }
 
-  _handleCloseCreate() {
-    this.$.createOverlay.close();
+  // private but used in test
+  handleCloseCreate() {
+    assertIsDefined(this.createOverlay, 'createOverlay');
+    this.createOverlay.close();
   }
 
-  _handleCreateClicked() {
-    this.$.createOverlay.open().then(() => {
-      this.$.createNewModal.focus();
+  // private but used in test
+  handleCreateClicked() {
+    assertIsDefined(this.createOverlay, 'createOverlay');
+    this.createOverlay.open().then(() => {
+      assertIsDefined(this.createNewModal, 'createNewModal');
+      this.createNewModal.focus();
     });
   }
 
-  _visibleToAll(item: GroupInfo) {
-    return item.options?.visible_to_all === true ? 'Y' : 'N';
-  }
-
-  computeLoadingClass(loading: boolean) {
-    return loading ? 'loading' : '';
-  }
-
-  _handleHasNewGroupName() {
-    this._hasNewGroupName = !!this.$.createNewModal.name;
+  private handleHasNewGroupName() {
+    assertIsDefined(this.createNewModal, 'createNewModal');
+    this.hasNewGroupName = !!this.createNewModal.name;
   }
 }
diff --git a/polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list_html.ts b/polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list_html.ts
deleted file mode 100644
index fdde399..0000000
--- a/polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list_html.ts
+++ /dev/null
@@ -1,79 +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 include="shared-styles">
-    /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
-  </style>
-  <style include="gr-table-styles">
-    /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
-  </style>
-  <gr-list-view
-    create-new="[[_createNewCapability]]"
-    filter="[[_filter]]"
-    items="[[_groups]]"
-    items-per-page="[[_groupsPerPage]]"
-    loading="[[_loading]]"
-    offset="[[_offset]]"
-    on-create-clicked="_handleCreateClicked"
-    path="[[_path]]"
-  >
-    <table id="list" class="genericList">
-      <tbody>
-        <tr class="headerRow">
-          <th class="name topHeader">Group Name</th>
-          <th class="description topHeader">Group Description</th>
-          <th class="visibleToAll topHeader">Visible To All</th>
-        </tr>
-        <tr id="loading" class$="loadingMsg [[computeLoadingClass(_loading)]]">
-          <td>Loading...</td>
-        </tr>
-      </tbody>
-      <tbody class$="[[computeLoadingClass(_loading)]]">
-        <template is="dom-repeat" items="[[_shownGroups]]">
-          <tr class="table">
-            <td class="name">
-              <a href$="[[_computeGroupUrl(item.id)]]">[[item.name]]</a>
-            </td>
-            <td class="description">[[item.description]]</td>
-            <td class="visibleToAll">[[_visibleToAll(item)]]</td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </gr-list-view>
-  <gr-overlay id="createOverlay" with-backdrop="">
-    <gr-dialog
-      id="createDialog"
-      class="confirmDialog"
-      disabled="[[!_hasNewGroupName]]"
-      confirm-label="Create"
-      confirm-on-enter=""
-      on-confirm="_handleCreateGroup"
-      on-cancel="_handleCloseCreate"
-    >
-      <div class="header" slot="header">Create Group</div>
-      <div class="main" slot="main">
-        <gr-create-group-dialog
-          id="createNewModal"
-          on-has-new-group-name="_handleHasNewGroupName"
-        ></gr-create-group-dialog>
-      </div>
-    </gr-dialog>
-  </gr-overlay>
-`;
diff --git a/polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list_test.ts b/polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list_test.ts
index 83669c9..709a0b7 100644
--- a/polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list_test.ts
+++ b/polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list_test.ts
@@ -30,6 +30,7 @@
 import {GrListView} from '../../shared/gr-list-view/gr-list-view';
 import {GrDialog} from '../../shared/gr-dialog/gr-dialog';
 import {GrOverlay} from '../../shared/gr-overlay/gr-overlay';
+import {SHOWN_ITEMS_COUNT} from '../../../constants/constants';
 
 const basicFixture = fixtureFromElement('gr-admin-group-list');
 
@@ -70,11 +71,12 @@
 
   const value: AppElementAdminParams = {view: GerritView.ADMIN, adminView: ''};
 
-  setup(() => {
+  setup(async () => {
     element = basicFixture.instantiate();
+    await element.updateComplete;
   });
 
-  test('_computeGroupUrl', () => {
+  test('computeGroupUrl', () => {
     let urlStub = sinon
       .stub(GerritNav, 'getUrlForGroup')
       .callsFake(
@@ -83,7 +85,7 @@
 
     let group = 'e2cd66f88a2db4d391ac068a92d987effbe872f5';
     assert.equal(
-      element._computeGroupUrl(group),
+      element.computeGroupUrl(group),
       '/admin/groups/e2cd66f88a2db4d391ac068a92d987effbe872f5'
     );
 
@@ -94,7 +96,7 @@
       .callsFake(() => '/admin/groups/user/test');
 
     group = 'user%2Ftest';
-    assert.equal(element._computeGroupUrl(group), '/admin/groups/user/test');
+    assert.equal(element.computeGroupUrl(group), '/admin/groups/user/test');
 
     urlStub.restore();
   });
@@ -103,30 +105,31 @@
     setup(async () => {
       groups = createGroupObjectList('test', 26);
       stubRestApi('getGroups').returns(Promise.resolve(groups));
-      element._paramsChanged(value);
-      await flush();
+      element.params = value;
+      element.paramsChanged();
+      await element.updateComplete;
     });
 
     test('test for test group in the list', () => {
-      assert.equal(element._groups[1].name, 'test1' as GroupName);
-      assert.equal(element._groups[1].options!.visible_to_all, false);
+      assert.equal(element.groups[1].name, 'test1' as GroupName);
+      assert.equal(element.groups[1].options!.visible_to_all, false);
     });
 
-    test('_shownGroups', () => {
-      assert.equal(element._shownGroups.length, 25);
+    test('groups', () => {
+      assert.equal(element.groups.slice(0, SHOWN_ITEMS_COUNT).length, 25);
     });
 
-    test('_maybeOpenCreateOverlay', () => {
+    test('maybeOpenCreateOverlay', () => {
       const overlayOpen = sinon.stub(
         queryAndAssert<GrOverlay>(element, '#createOverlay'),
         'open'
       );
-      element._maybeOpenCreateOverlay();
+      element.maybeOpenCreateOverlay();
       assert.isFalse(overlayOpen.called);
-      element._maybeOpenCreateOverlay(undefined);
+      element.maybeOpenCreateOverlay(undefined);
       assert.isFalse(overlayOpen.called);
       value.openCreateModal = true;
-      element._maybeOpenCreateOverlay(value);
+      element.maybeOpenCreateOverlay(value);
       assert.isTrue(overlayOpen.called);
     });
   });
@@ -135,41 +138,41 @@
     setup(async () => {
       groups = createGroupObjectList('test', 25);
       stubRestApi('getGroups').returns(Promise.resolve(groups));
-      await element._paramsChanged(value);
-      await flush();
+      element.params = value;
+      await element.paramsChanged();
+      await element.updateComplete;
     });
 
-    test('_shownGroups', () => {
-      assert.equal(element._shownGroups.length, 25);
+    test('groups', () => {
+      assert.equal(element.groups.slice(0, SHOWN_ITEMS_COUNT).length, 25);
     });
   });
 
   suite('filter', () => {
-    test('_paramsChanged', async () => {
+    test('paramsChanged', async () => {
       const getGroupsStub = stubRestApi('getGroups');
       getGroupsStub.returns(Promise.resolve(groups));
       value.filter = 'test';
       value.offset = 25;
-      await element._paramsChanged(value);
+      element.params = value;
+      await element.paramsChanged();
       assert.isTrue(getGroupsStub.lastCall.calledWithExactly('test', 25, 25));
     });
   });
 
   suite('loading', async () => {
     test('correct contents are displayed', async () => {
-      assert.isTrue(element._loading);
-      assert.equal(element.computeLoadingClass(element._loading), 'loading');
+      assert.isTrue(element.loading);
       assert.equal(
         getComputedStyle(queryAndAssert<HTMLTableElement>(element, '#loading'))
           .display,
         'block'
       );
 
-      element._loading = false;
-      element._groups = createGroupList('test', 25);
+      element.loading = false;
+      element.groups = createGroupList('test', 25);
 
-      await flush();
-      assert.equal(element.computeLoadingClass(element._loading), '');
+      await element.updateComplete;
       assert.equal(
         getComputedStyle(queryAndAssert<HTMLTableElement>(element, '#loading'))
           .display,
@@ -179,10 +182,10 @@
   });
 
   suite('create new', () => {
-    test('_handleCreateClicked called when create-click fired', () => {
+    test('handleCreateClicked called when create-click fired', () => {
       const handleCreateClickedStub = sinon.stub(
         element,
-        '_handleCreateClicked'
+        'handleCreateClicked'
       );
       queryAndAssert<GrListView>(element, 'gr-list-view').dispatchEvent(
         new CustomEvent('create-clicked', {
@@ -193,16 +196,16 @@
       assert.isTrue(handleCreateClickedStub.called);
     });
 
-    test('_handleCreateClicked opens modal', () => {
+    test('handleCreateClicked opens modal', () => {
       const openStub = sinon
         .stub(queryAndAssert<GrOverlay>(element, '#createOverlay'), 'open')
         .returns(Promise.resolve());
-      element._handleCreateClicked();
+      element.handleCreateClicked();
       assert.isTrue(openStub.called);
     });
 
-    test('_handleCreateGroup called when confirm fired', () => {
-      const handleCreateGroupStub = sinon.stub(element, '_handleCreateGroup');
+    test('handleCreateGroup called when confirm fired', () => {
+      const handleCreateGroupStub = sinon.stub(element, 'handleCreateGroup');
       queryAndAssert<GrDialog>(element, '#createDialog').dispatchEvent(
         new CustomEvent('confirm', {
           composed: true,
@@ -212,8 +215,8 @@
       assert.isTrue(handleCreateGroupStub.called);
     });
 
-    test('_handleCloseCreate called when cancel fired', () => {
-      const handleCloseCreateStub = sinon.stub(element, '_handleCloseCreate');
+    test('handleCloseCreate called when cancel fired', () => {
+      const handleCloseCreateStub = sinon.stub(element, 'handleCloseCreate');
       queryAndAssert<GrDialog>(element, '#createDialog').dispatchEvent(
         new CustomEvent('cancel', {
           composed: true,