diff --git a/demo/src/custom-cards/ha-demo-card.ts b/demo/src/custom-cards/ha-demo-card.ts
index 0f27328ecf..89835b5174 100644
--- a/demo/src/custom-cards/ha-demo-card.ts
+++ b/demo/src/custom-cards/ha-demo-card.ts
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-circular-progress";
@@ -14,6 +14,7 @@ import {
   setDemoConfig,
 } from "../configs/demo-configs";
 
+@customElement("ha-demo-card")
 export class HADemoCard extends LitElement implements LovelaceCard {
   @property({ attribute: false }) public lovelace?: Lovelace;
 
@@ -154,5 +155,3 @@ declare global {
     "ha-demo-card": HADemoCard;
   }
 }
-
-customElements.define("ha-demo-card", HADemoCard);
diff --git a/demo/src/ha-demo.ts b/demo/src/ha-demo.ts
index 4b527df487..d542477be9 100644
--- a/demo/src/ha-demo.ts
+++ b/demo/src/ha-demo.ts
@@ -1,5 +1,6 @@
 // Compat needs to be first import
 import "../../src/resources/compatibility";
+import { customElement } from "lit/decorators";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 import {
@@ -26,7 +27,8 @@ import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
 import { mockTranslations } from "./stubs/translations";
 
-class HaDemo extends HomeAssistantAppEl {
+@customElement("ha-demo")
+export class HaDemo extends HomeAssistantAppEl {
   protected async _initializeHass() {
     const initial: Partial<MockHomeAssistant> = {
       panelUrl: (this as any)._panelUrl,
@@ -123,8 +125,6 @@ class HaDemo extends HomeAssistantAppEl {
   }
 }
 
-customElements.define("ha-demo", HaDemo);
-
 declare global {
   interface HTMLElementTagNameMap {
     "ha-demo": HaDemo;
diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts
index 0d22c49ad2..7b1d18f529 100644
--- a/hassio/src/addon-store/hassio-addon-repository.ts
+++ b/hassio/src/addon-store/hassio-addon-repository.ts
@@ -1,6 +1,6 @@
 import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { property } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
@@ -14,7 +14,8 @@ import "../components/hassio-card-content";
 import { filterAndSort } from "../components/hassio-filter-addons";
 import { hassioStyle } from "../resources/hassio-style";
 
-class HassioAddonRepositoryEl extends LitElement {
+@customElement("hassio-addon-repository")
+export class HassioAddonRepositoryEl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public supervisor!: Supervisor;
@@ -140,5 +141,3 @@ class HassioAddonRepositoryEl extends LitElement {
     ];
   }
 }
-
-customElements.define("hassio-addon-repository", HassioAddonRepositoryEl);
diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index 0623e2bf44..0ae00d5453 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -9,7 +9,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
@@ -49,7 +49,8 @@ const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
   return a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1;
 };
 
-class HassioAddonStore extends LitElement {
+@customElement("hassio-addon-store")
+export class HassioAddonStore extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public supervisor!: Supervisor;
@@ -250,5 +251,3 @@ class HassioAddonStore extends LitElement {
     `;
   }
 }
-
-customElements.define("hassio-addon-store", HassioAddonStore);
diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
index 1fea597049..f151fea546 100644
--- a/src/auth/ha-auth-flow.ts
+++ b/src/auth/ha-auth-flow.ts
@@ -8,7 +8,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import "../components/ha-alert";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
@@ -25,7 +25,8 @@ import "./ha-password-manager-polyfill";
 
 type State = "loading" | "error" | "step";
 
-class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
+@customElement("ha-auth-flow")
+export class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
   @property({ attribute: false }) public authProvider?: AuthProvider;
 
   @property() public clientId?: string;
@@ -407,7 +408,6 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
     `;
   }
 }
-customElements.define("ha-auth-flow", HaAuthFlow);
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index add29139bc..9f780facc2 100644
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -1,5 +1,5 @@
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import punycode from "punycode";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { extractSearchParamsObject } from "../common/url/search-params";
@@ -14,7 +14,8 @@ import "./ha-auth-flow";
 
 import("./ha-pick-auth-provider");
 
-class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
+@customElement("ha-authorize")
+export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
   @property() public clientId?: string;
 
   @property() public redirectUri?: string;
@@ -183,4 +184,3 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     `;
   }
 }
-customElements.define("ha-authorize", HaAuthorize);
diff --git a/src/auth/ha-pick-auth-provider.ts b/src/auth/ha-pick-auth-provider.ts
index 3ee7638b10..5d9b480030 100644
--- a/src/auth/ha-pick-auth-provider.ts
+++ b/src/auth/ha-pick-auth-provider.ts
@@ -1,7 +1,7 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { css, html, LitElement } from "lit";
-import { property } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "../components/ha-icon-next";
 import { AuthProvider } from "../data/auth";
@@ -13,7 +13,8 @@ declare global {
   }
 }
 
-class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
+@customElement("ha-pick-auth-provider")
+export class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
   @property() public authProviders: AuthProvider[] = [];
 
   protected render() {
@@ -47,4 +48,3 @@ class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
     }
   `;
 }
-customElements.define("ha-pick-auth-provider", HaPickAuthProvider);
diff --git a/src/components/buttons/ha-call-api-button.ts b/src/components/buttons/ha-call-api-button.ts
index 34013a1102..05fc1f878d 100644
--- a/src/components/buttons/ha-call-api-button.ts
+++ b/src/components/buttons/ha-call-api-button.ts
@@ -1,9 +1,10 @@
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { property, query } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "./ha-progress-button";
 
+@customElement("ha-call-api-button")
 class HaCallApiButton extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -69,8 +70,6 @@ class HaCallApiButton extends LitElement {
   }
 }
 
-customElements.define("ha-call-api-button", HaCallApiButton);
-
 declare global {
   interface HTMLElementTagNameMap {
     "ha-call-api-button": HaCallApiButton;
diff --git a/src/components/ha-icon-next.ts b/src/components/ha-icon-next.ts
index 6b6eef9b01..0752f492fe 100644
--- a/src/components/ha-icon-next.ts
+++ b/src/components/ha-icon-next.ts
@@ -1,6 +1,8 @@
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
+import { customElement } from "lit/decorators";
 import { HaSvgIcon } from "./ha-svg-icon";
 
+@customElement("ha-icon-next")
 export class HaIconNext extends HaSvgIcon {
   public connectedCallback() {
     super.connectedCallback();
@@ -20,5 +22,3 @@ declare global {
     "ha-icon-next": HaIconNext;
   }
 }
-
-customElements.define("ha-icon-next", HaIconNext);
diff --git a/src/components/ha-icon-prev.ts b/src/components/ha-icon-prev.ts
index 29712fc89b..f6744a1b20 100644
--- a/src/components/ha-icon-prev.ts
+++ b/src/components/ha-icon-prev.ts
@@ -1,6 +1,8 @@
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
+import { customElement } from "lit/decorators";
 import { HaSvgIcon } from "./ha-svg-icon";
 
+@customElement("ha-icon-prev")
 export class HaIconPrev extends HaSvgIcon {
   public connectedCallback() {
     super.connectedCallback();
@@ -20,5 +22,3 @@ declare global {
     "ha-icon-prev": HaIconPrev;
   }
 }
-
-customElements.define("ha-icon-prev", HaIconPrev);
diff --git a/src/components/ha-label-badge.ts b/src/components/ha-label-badge.ts
index a8bbf838a5..707952b9e1 100644
--- a/src/components/ha-label-badge.ts
+++ b/src/components/ha-label-badge.ts
@@ -6,9 +6,10 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { property } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 
+@customElement("ha-label-badge")
 class HaLabelBadge extends LitElement {
   @property() public label?: string;
 
@@ -132,5 +133,3 @@ declare global {
     "ha-label-badge": HaLabelBadge;
   }
 }
-
-customElements.define("ha-label-badge", HaLabelBadge);
diff --git a/src/components/ha-service-picker.ts b/src/components/ha-service-picker.ts
index b631085996..76532a331d 100644
--- a/src/components/ha-service-picker.ts
+++ b/src/components/ha-service-picker.ts
@@ -1,6 +1,6 @@
 import { html, LitElement } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { LocalizeFunc } from "../common/translations/localize";
@@ -17,6 +17,7 @@ const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
   >
 </mwc-list-item>`;
 
+@customElement("ha-service-picker")
 class HaServicePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -113,8 +114,6 @@ class HaServicePicker extends LitElement {
   }
 }
 
-customElements.define("ha-service-picker", HaServicePicker);
-
 declare global {
   interface HTMLElementTagNameMap {
     "ha-service-picker": HaServicePicker;
diff --git a/src/components/ha-toast.ts b/src/components/ha-toast.ts
index f29fda318c..99d6e4f872 100644
--- a/src/components/ha-toast.ts
+++ b/src/components/ha-toast.ts
@@ -1,11 +1,13 @@
 import "@polymer/paper-toast/paper-toast";
 import type { PaperToastElement } from "@polymer/paper-toast/paper-toast";
+import { customElement } from "lit/decorators";
 import type { Constructor } from "../types";
 
 const PaperToast = customElements.get(
   "paper-toast"
 ) as Constructor<PaperToastElement>;
 
+@customElement("ha-toast")
 export class HaToast extends PaperToast {
   private _resizeListener?: (obj: { matches: boolean }) => unknown;
 
@@ -34,5 +36,3 @@ declare global {
     "ha-toast": HaToast;
   }
 }
-
-customElements.define("ha-toast", HaToast);
diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
index bad1abd75d..56ff0fd8d7 100644
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@@ -20,7 +20,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";
 import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
 import { useAmPm } from "../../common/datetime/use_am_pm";
@@ -71,6 +71,7 @@ const defaultFullCalendarConfig: CalendarOptions = {
   },
 };
 
+@customElement("ha-full-calendar")
 export class HAFullCalendar extends LitElement {
   public hass!: HomeAssistant;
 
@@ -673,5 +674,3 @@ export class HAFullCalendar extends LitElement {
     ];
   }
 }
-
-window.customElements.define("ha-full-calendar", HAFullCalendar);
diff --git a/src/panels/config/cloud/account/cloud-account.ts b/src/panels/config/cloud/account/cloud-account.ts
index e3a8fbd494..fdd3e20689 100644
--- a/src/panels/config/cloud/account/cloud-account.ts
+++ b/src/panels/config/cloud/account/cloud-account.ts
@@ -321,8 +321,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
   }
 }
 
-customElements.define("cloud-account", CloudAccount);
-
 declare global {
   interface HTMLElementTagNameMap {
     "cloud-account": CloudAccount;
diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts
index 1590a44cb3..40c2a678f0 100644
--- a/src/panels/lovelace/ha-panel-lovelace.ts
+++ b/src/panels/lovelace/ha-panel-lovelace.ts
@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import deepFreeze from "deep-freeze";
 import { html, LitElement, TemplateResult } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
   addSearchParam,
@@ -38,7 +38,8 @@ interface LovelacePanelConfig {
 let editorLoaded = false;
 let resourcesLoaded = false;
 
-class LovelacePanel extends LitElement {
+@customElement("ha-panel-lovelace")
+export class LovelacePanel extends LitElement {
   @property() public panel?: PanelInfo<LovelacePanelConfig>;
 
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -448,5 +449,3 @@ class LovelacePanel extends LitElement {
     }
   }
 }
-
-customElements.define("ha-panel-lovelace", LovelacePanel);
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 5582c6d67b..ae5bef430e 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -29,7 +29,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { property, query, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
@@ -78,6 +78,7 @@ import type { Lovelace } from "./types";
 import "./views/hui-view";
 import type { HUIView } from "./views/hui-view";
 
+@customElement("hui-root")
 class HUIRoot extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -1066,5 +1067,3 @@ declare global {
     "hui-root": HUIRoot;
   }
 }
-
-customElements.define("hui-root", HUIRoot);
diff --git a/src/panels/map/ha-panel-map.ts b/src/panels/map/ha-panel-map.ts
index 89b9351473..57a055c379 100644
--- a/src/panels/map/ha-panel-map.ts
+++ b/src/panels/map/ha-panel-map.ts
@@ -1,7 +1,7 @@
 import { mdiPencil } from "@mdi/js";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-import { property } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-menu-button";
@@ -11,6 +11,7 @@ import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 
+@customElement("ha-panel-map")
 class HaPanelMap extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -95,8 +96,6 @@ class HaPanelMap extends LitElement {
   }
 }
 
-customElements.define("ha-panel-map", HaPanelMap);
-
 declare global {
   interface HTMLElementTagNameMap {
     "ha-panel-map": HaPanelMap;