diff --git a/frontend/src/index.ts b/frontend/src/index.ts
index c995d1c3..8bba7360 100644
--- a/frontend/src/index.ts
+++ b/frontend/src/index.ts
@@ -1,6 +1,6 @@
 import type { TemplateResult } from "lit";
 import { render } from "lit";
-import { property, state, query } from "lit/decorators.js";
+import { property, state, query, customElement } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { msg, localized } from "@lit/localize";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -53,6 +53,7 @@ type APIUser = {
  * @event update-user-info
  */
 @localized()
+@customElement("browsertrix-app")
 export class App extends LiteElement {
   @property({ type: String })
   version?: string;
@@ -937,5 +938,3 @@ export class App extends LiteElement {
     AppStateService.updateOrgSlug(null);
   }
 }
-
-customElements.define("browsertrix-app", App);
diff --git a/frontend/src/pages/org/browser-profiles-detail.ts b/frontend/src/pages/org/browser-profiles-detail.ts
index 0687d437..509e4301 100644
--- a/frontend/src/pages/org/browser-profiles-detail.ts
+++ b/frontend/src/pages/org/browser-profiles-detail.ts
@@ -1,4 +1,4 @@
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import { msg, localized, str } from "@lit/localize";
@@ -18,6 +18,7 @@ import { Profile } from "./types";
  * ```
  */
 @localized()
+@customElement("btrix-browser-profiles-detail")
 export class BrowserProfilesDetail extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -665,5 +666,3 @@ export class BrowserProfilesDetail extends LiteElement {
     e.stopPropagation();
   }
 }
-
-customElements.define("btrix-browser-profiles-detail", BrowserProfilesDetail);
diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index 2266a4a5..cd504960 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@@ -1,4 +1,4 @@
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import { when } from "lit/directives/when.js";
 
@@ -18,6 +18,7 @@ import type { SelectNewDialogEvent } from "./index";
  * ```
  */
 @localized()
+@customElement("btrix-browser-profiles-list")
 export class BrowserProfilesList extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -297,5 +298,3 @@ export class BrowserProfilesList extends LiteElement {
     return data.items;
   }
 }
-
-customElements.define("btrix-browser-profiles-list", BrowserProfilesList);
diff --git a/frontend/src/pages/org/browser-profiles-new.ts b/frontend/src/pages/org/browser-profiles-new.ts
index 94ccafa0..963f8f82 100644
--- a/frontend/src/pages/org/browser-profiles-new.ts
+++ b/frontend/src/pages/org/browser-profiles-new.ts
@@ -1,4 +1,4 @@
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -16,6 +16,7 @@ import LiteElement, { html } from "../../utils/LiteElement";
  * ```
  */
 @localized()
+@customElement("btrix-browser-profiles-new")
 export class BrowserProfilesNew extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -236,5 +237,3 @@ export class BrowserProfilesNew extends LiteElement {
     }
   }
 }
-
-customElements.define("btrix-browser-profiles-new", BrowserProfilesNew);
diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts
index 455d3e97..82d70fae 100644
--- a/frontend/src/pages/org/collection-detail.ts
+++ b/frontend/src/pages/org/collection-detail.ts
@@ -1,4 +1,4 @@
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import { choose } from "lit/directives/choose.js";
 import { when } from "lit/directives/when.js";
@@ -25,6 +25,7 @@ const TABS = ["replay", "items"] as const;
 export type Tab = (typeof TABS)[number];
 
 @localized()
+@customElement("btrix-collection-detail")
 export class CollectionDetail extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -852,4 +853,3 @@ export class CollectionDetail extends LiteElement {
     }
   }
 }
-customElements.define("btrix-collection-detail", CollectionDetail);
diff --git a/frontend/src/pages/org/collection-edit.ts b/frontend/src/pages/org/collection-edit.ts
index 33b91191..a65d7d6f 100644
--- a/frontend/src/pages/org/collection-edit.ts
+++ b/frontend/src/pages/org/collection-edit.ts
@@ -1,4 +1,4 @@
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import { when } from "lit/directives/when.js";
 import difference from "lodash/fp/difference";
@@ -10,6 +10,7 @@ import type { Collection } from "../../types/collection";
 import "./collection-editor";
 
 @localized()
+@customElement("btrix-collection-edit")
 export class CollectionEdit extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -202,4 +203,3 @@ export class CollectionEdit extends LiteElement {
     return data;
   }
 }
-customElements.define("btrix-collection-edit", CollectionEdit);
diff --git a/frontend/src/pages/org/collection-editor.ts b/frontend/src/pages/org/collection-editor.ts
index dc5ca0e4..4fa309cc 100644
--- a/frontend/src/pages/org/collection-editor.ts
+++ b/frontend/src/pages/org/collection-editor.ts
@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { state, property, query } from "lit/decorators.js";
+import { state, property, query, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import { when } from "lit/directives/when.js";
 import { guard } from "lit/directives/guard.js";
@@ -93,6 +93,7 @@ type FormValues = {
  * @event on-submit
  */
 @localized()
+@customElement("btrix-collection-editor")
 export class CollectionEditor extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -1557,4 +1558,3 @@ export class CollectionEditor extends LiteElement {
     }
   }
 }
-customElements.define("btrix-collection-editor", CollectionEditor);
diff --git a/frontend/src/pages/org/collections-list.ts b/frontend/src/pages/org/collections-list.ts
index bffc99e8..1b88888c 100644
--- a/frontend/src/pages/org/collections-list.ts
+++ b/frontend/src/pages/org/collections-list.ts
@@ -1,4 +1,4 @@
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import { when } from "lit/directives/when.js";
 import { guard } from "lit/directives/guard.js";
@@ -51,6 +51,7 @@ const sortableFields: Record<
 const MIN_SEARCH_LENGTH = 2;
 
 @localized()
+@customElement("btrix-collections-list")
 export class CollectionsList extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -751,4 +752,3 @@ export class CollectionsList extends LiteElement {
     return data;
   }
 }
-customElements.define("btrix-collections-list", CollectionsList);
diff --git a/frontend/src/pages/org/collections-new.ts b/frontend/src/pages/org/collections-new.ts
index 66a6bc30..93866ada 100644
--- a/frontend/src/pages/org/collections-new.ts
+++ b/frontend/src/pages/org/collections-new.ts
@@ -1,4 +1,4 @@
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 
 import type { CollectionSubmitEvent } from "./collection-editor";
@@ -8,6 +8,7 @@ import type { Collection } from "../../types/collection";
 import "./collection-editor";
 
 @localized()
+@customElement("btrix-collections-new")
 export class CollectionsNew extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -105,4 +106,3 @@ export class CollectionsNew extends LiteElement {
     this.isSubmitting = false;
   }
 }
-customElements.define("btrix-collections-new", CollectionsNew);
diff --git a/frontend/src/pages/org/components/file-uploader.ts b/frontend/src/pages/org/components/file-uploader.ts
index 46479701..43e24027 100644
--- a/frontend/src/pages/org/components/file-uploader.ts
+++ b/frontend/src/pages/org/components/file-uploader.ts
@@ -1,4 +1,4 @@
-import { state, property, queryAsync } from "lit/decorators.js";
+import { state, property, queryAsync, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import { when } from "lit/directives/when.js";
 import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
@@ -51,6 +51,7 @@ const ABORT_REASON_QUOTA_REACHED = "storage_quota_reached";
  * @event uploaded
  */
 @localized()
+@customElement("btrix-file-uploader")
 export class FileUploader extends LiteElement {
   @property({ type: String })
   orgId!: string;
@@ -537,4 +538,3 @@ export class FileUploader extends LiteElement {
     return !formEl.querySelector("[data-invalid]");
   }
 }
-customElements.define("btrix-file-uploader", FileUploader);
diff --git a/frontend/src/pages/org/components/new-browser-profile-dialog.ts b/frontend/src/pages/org/components/new-browser-profile-dialog.ts
index a061f808..5315fe05 100644
--- a/frontend/src/pages/org/components/new-browser-profile-dialog.ts
+++ b/frontend/src/pages/org/components/new-browser-profile-dialog.ts
@@ -1,4 +1,4 @@
-import { state, property, queryAsync } from "lit/decorators.js";
+import { state, property, queryAsync, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import type { SlInput } from "@shoelace-style/shoelace";
 
@@ -7,6 +7,7 @@ import LiteElement, { html } from "../../../utils/LiteElement";
 import type { Dialog } from "../../../components/dialog";
 
 @localized()
+@customElement("btrix-new-browser-profile-dialog")
 export class NewBrowserProfileDialog extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -176,7 +177,3 @@ export class NewBrowserProfileDialog extends LiteElement {
     e.stopPropagation();
   }
 }
-customElements.define(
-  "btrix-new-browser-profile-dialog",
-  NewBrowserProfileDialog
-);
diff --git a/frontend/src/pages/org/components/new-collection-dialog.ts b/frontend/src/pages/org/components/new-collection-dialog.ts
index 1bf7f7ca..6b8bd11d 100644
--- a/frontend/src/pages/org/components/new-collection-dialog.ts
+++ b/frontend/src/pages/org/components/new-collection-dialog.ts
@@ -1,4 +1,4 @@
-import { state, property, queryAsync } from "lit/decorators.js";
+import { state, property, queryAsync, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import type { SlInput } from "@shoelace-style/shoelace";
 import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
@@ -9,6 +9,7 @@ import LiteElement, { html } from "../../../utils/LiteElement";
 import type { Dialog } from "../../../components/dialog";
 
 @localized()
+@customElement("btrix-new-collection-dialog")
 export class NewCollectionDialog extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -174,4 +175,3 @@ export class NewCollectionDialog extends LiteElement {
     e.stopPropagation();
   }
 }
-customElements.define("btrix-new-collection-dialog", NewCollectionDialog);
diff --git a/frontend/src/pages/org/components/new-workflow-dialog.ts b/frontend/src/pages/org/components/new-workflow-dialog.ts
index f74f7f47..1a0faa03 100644
--- a/frontend/src/pages/org/components/new-workflow-dialog.ts
+++ b/frontend/src/pages/org/components/new-workflow-dialog.ts
@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 
 import seededCrawlSvg from "../../../assets/images/new-crawl-config_Seeded-Crawl.svg";
@@ -11,6 +11,7 @@ export type SelectJobTypeEvent = CustomEvent<"url-list" | "seed-crawl">;
  * @event select-job-type SelectJobTypeEvent
  */
 @localized()
+@customElement("btrix-new-workflow-dialog")
 export class NewWorkflowDialog extends LitElement {
   static styles = css`
     .title,
@@ -127,4 +128,3 @@ export class NewWorkflowDialog extends LitElement {
     `;
   }
 }
-customElements.define("btrix-new-workflow-dialog", NewWorkflowDialog);
diff --git a/frontend/src/pages/org/crawl-detail.ts b/frontend/src/pages/org/crawl-detail.ts
index 3bd209e3..4b305013 100644
--- a/frontend/src/pages/org/crawl-detail.ts
+++ b/frontend/src/pages/org/crawl-detail.ts
@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -38,6 +38,7 @@ const POLL_INTERVAL_SECONDS = 10;
  * ```
  */
 @localized()
+@customElement("btrix-crawl-detail")
 export class CrawlDetail extends LiteElement {
   @property({ type: Object })
   authState?: AuthState;
@@ -1091,5 +1092,3 @@ ${this.crawl?.description}
     }
   }
 }
-
-customElements.define("btrix-crawl-detail", CrawlDetail);
diff --git a/frontend/src/pages/org/crawls-list.ts b/frontend/src/pages/org/crawls-list.ts
index 1b815176..cd30b45f 100644
--- a/frontend/src/pages/org/crawls-list.ts
+++ b/frontend/src/pages/org/crawls-list.ts
@@ -1,4 +1,4 @@
-import { state, property, query } from "lit/decorators.js";
+import { state, property, query, customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized, str } from "@lit/localize";
 import { when } from "lit/directives/when.js";
@@ -50,6 +50,7 @@ const sortableFields: Record<
  * ```
  */
 @localized()
+@customElement("btrix-crawls-list")
 export class CrawlsList extends LiteElement {
   static FieldLabels: Record<SearchFields, string> = {
     name: msg("Name"),
@@ -747,5 +748,3 @@ export class CrawlsList extends LiteElement {
     return data;
   }
 }
-
-customElements.define("btrix-crawls-list", CrawlsList);
diff --git a/frontend/src/pages/org/dashboard.ts b/frontend/src/pages/org/dashboard.ts
index 440c80a3..e57865e8 100644
--- a/frontend/src/pages/org/dashboard.ts
+++ b/frontend/src/pages/org/dashboard.ts
@@ -1,5 +1,5 @@
 import type { PropertyValues, TemplateResult } from "lit";
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized, str } from "@lit/localize";
@@ -32,6 +32,7 @@ type Metrics = {
 const BYTES_PER_GB = 1e9;
 
 @localized()
+@customElement("btrix-dashboard")
 export class Dashboard extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -629,4 +630,3 @@ export class Dashboard extends LiteElement {
     }
   }
 }
-customElements.define("btrix-dashboard", Dashboard);
diff --git a/frontend/src/pages/org/settings.ts b/frontend/src/pages/org/settings.ts
index e63ebb92..304fc339 100644
--- a/frontend/src/pages/org/settings.ts
+++ b/frontend/src/pages/org/settings.ts
@@ -1,4 +1,4 @@
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized, str } from "@lit/localize";
 import { when } from "lit/directives/when.js";
@@ -56,6 +56,7 @@ export type OrgRemoveMemberEvent = CustomEvent<{
  * org-remove-member
  */
 @localized()
+@customElement("btrix-org-settings")
 export class OrgSettings extends LiteElement {
   @property({ type: Object })
   authState?: AuthState;
@@ -589,5 +590,3 @@ export class OrgSettings extends LiteElement {
     }
   }
 }
-
-customElements.define("btrix-org-settings", OrgSettings);
diff --git a/frontend/src/pages/org/workflow-detail.ts b/frontend/src/pages/org/workflow-detail.ts
index 04a28ccd..ea494fef 100644
--- a/frontend/src/pages/org/workflow-detail.ts
+++ b/frontend/src/pages/org/workflow-detail.ts
@@ -1,5 +1,5 @@
 import type { HTMLTemplateResult, TemplateResult } from "lit";
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { until } from "lit/directives/until.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -40,6 +40,7 @@ const LOGS_PAGE_SIZE = 50;
  * ```
  */
 @localized()
+@customElement("btrix-workflow-detail")
 export class WorkflowDetail extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -1719,5 +1720,3 @@ export class WorkflowDetail extends LiteElement {
     return data;
   }
 }
-
-customElements.define("btrix-workflow-detail", WorkflowDetail);
diff --git a/frontend/src/pages/org/workflow-editor.ts b/frontend/src/pages/org/workflow-editor.ts
index 0143e0e1..186f2d58 100644
--- a/frontend/src/pages/org/workflow-editor.ts
+++ b/frontend/src/pages/org/workflow-editor.ts
@@ -10,7 +10,13 @@ import type {
   SlSwitch,
   SlTextarea,
 } from "@shoelace-style/shoelace";
-import { state, property, query, queryAsync } from "lit/decorators.js";
+import {
+  state,
+  property,
+  query,
+  queryAsync,
+  customElement,
+} from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { msg, localized, str } from "@lit/localize";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -223,6 +229,7 @@ const BYTES_PER_GB = 1e9;
 const URL_LIST_MAX_URLS = 1000;
 
 @localized()
+@customElement("btrix-workflow-editor")
 export class CrawlConfigEditor extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -2470,5 +2477,3 @@ https://archiveweb.page/images/${"logo.svg"}`}
     }
   }
 }
-
-customElements.define("btrix-workflow-editor", CrawlConfigEditor);
diff --git a/frontend/src/pages/org/workflows-list.ts b/frontend/src/pages/org/workflows-list.ts
index 14b3db71..b8475822 100644
--- a/frontend/src/pages/org/workflows-list.ts
+++ b/frontend/src/pages/org/workflows-list.ts
@@ -1,5 +1,5 @@
 import type { HTMLTemplateResult, PropertyValueMap } from "lit";
-import { state, property, query } from "lit/decorators.js";
+import { state, property, query, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import { when } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -59,6 +59,7 @@ const sortableFields: Record<
  * ```
  */
 @localized()
+@customElement("btrix-workflows-list")
 export class WorkflowsList extends LiteElement {
   static FieldLabels: Record<SearchFields, string> = {
     name: msg("Name"),
@@ -860,5 +861,3 @@ export class WorkflowsList extends LiteElement {
     return data;
   }
 }
-
-customElements.define("btrix-workflows-list", WorkflowsList);
diff --git a/frontend/src/pages/org/workflows-new.ts b/frontend/src/pages/org/workflows-new.ts
index 8a28aaf3..e967d93b 100644
--- a/frontend/src/pages/org/workflows-new.ts
+++ b/frontend/src/pages/org/workflows-new.ts
@@ -1,5 +1,5 @@
 import type { TemplateResult, LitElement, PropertyValues } from "lit";
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { msg, localized, str } from "@lit/localize";
 import { mergeDeep } from "immutable";
@@ -40,6 +40,7 @@ const defaultValue = {
  * ```
  */
 @localized()
+@customElement("btrix-workflows-new")
 export class WorkflowsNew extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
@@ -146,5 +147,3 @@ export class WorkflowsNew extends LiteElement {
     </btrix-alert>
   `;
 }
-
-customElements.define("btrix-workflows-new", WorkflowsNew);