From f72cf2acb7641741f60b8364bfcda4794d7c9e5f Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sat, 29 Nov 2025 21:18:38 -0500 Subject: [PATCH 1/3] Add custom element decorators instead of customElements.define --- src/components/chart/state-history-chart-line.ts | 4 ++-- src/components/entity/state-badge.ts | 5 ++--- src/components/map/ha-entity-marker.ts | 5 ++--- src/dialogs/more-info/controls/more-info-camera.ts | 5 ++--- src/dialogs/more-info/controls/more-info-climate.ts | 5 ++--- src/dialogs/more-info/controls/more-info-group.ts | 5 ++--- src/dialogs/more-info/controls/more-info-humidifier.ts | 5 ++--- src/layouts/ha-init-page.ts | 5 ++--- src/managers/notification-manager.ts | 5 ++--- src/panels/calendar/dialog-calendar-event-detail.ts | 8 ++------ src/panels/config/areas/dialog-area-registry-detail.ts | 5 ++--- src/panels/config/areas/dialog-floor-registry-detail.ts | 5 ++--- src/panels/config/automation/ha-automation-editor.ts | 5 ++--- .../dialog-manage-cloudhook/dialog-manage-cloudhook.ts | 5 ++--- .../config/helpers/forms/dialog-schedule-block-info.ts | 5 ++--- .../integration-panels/zha/zha-cluster-commands.ts | 5 ++--- src/panels/config/logs/dialog-system-log-detail.ts | 5 ++--- src/panels/config/person/dialog-person-detail.ts | 5 ++--- src/panels/config/script/ha-script-editor.ts | 5 ++--- src/panels/config/voice-assistants/cloud-alexa-pref.ts | 5 ++--- src/panels/config/voice-assistants/cloud-google-pref.ts | 5 ++--- src/panels/config/zone/dialog-home-zone-detail.ts | 5 ++--- src/panels/config/zone/dialog-zone-detail.ts | 5 ++--- src/panels/custom/ha-panel-custom.ts | 5 ++--- src/panels/history/ha-panel-history.ts | 5 ++--- src/panels/lovelace/cards/hui-grid-card.ts | 4 ++-- src/panels/lovelace/cards/hui-vertical-stack-card.ts | 4 ++-- .../common/directives/action-handler-directive.ts | 4 ++-- src/panels/lovelace/elements/hui-conditional-element.ts | 4 ++-- src/panels/lovelace/views/hui-masonry-view.ts | 5 ++--- src/panels/lovelace/views/hui-panel-view.ts | 5 ++--- src/panels/lovelace/views/hui-sidebar-view.ts | 4 ++-- 32 files changed, 64 insertions(+), 93 deletions(-) diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts index 99084c0d52a4..b7a44cf0437b 100644 --- a/src/components/chart/state-history-chart-line.ts +++ b/src/components/chart/state-history-chart-line.ts @@ -1,6 +1,6 @@ import type { PropertyValues } from "lit"; import { html, LitElement } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import type { VisualMapComponentOption } from "echarts/components"; import type { LineSeriesOption } from "echarts/charts"; import type { YAXisOption } from "echarts/types/dist/shared"; @@ -27,6 +27,7 @@ const safeParseFloat = (value) => { return isFinite(parsed) ? parsed : null; }; +@customElement("state-history-chart-line") export class StateHistoryChartLine extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -795,7 +796,6 @@ export class StateHistoryChartLine extends LitElement { return Math.abs(value) < 1 ? value : roundingFn(value); } } -customElements.define("state-history-chart-line", StateHistoryChartLine); declare global { interface HTMLElementTagNameMap { diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index b820470cf4f5..f15f36178f15 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -2,7 +2,7 @@ import { mdiAlert } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import { styleMap } from "lit/directives/style-map"; import { computeDomain } from "../../common/entity/compute_domain"; @@ -17,6 +17,7 @@ import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate"; import type { HomeAssistant } from "../../types"; import "../ha-state-icon"; +@customElement("state-badge") export class StateBadge extends LitElement { public hass?: HomeAssistant; @@ -265,5 +266,3 @@ declare global { "state-badge": StateBadge; } } - -customElements.define("state-badge", StateBadge); diff --git a/src/components/map/ha-entity-marker.ts b/src/components/map/ha-entity-marker.ts index fd72d2c65a4b..2514153ec2fd 100644 --- a/src/components/map/ha-entity-marker.ts +++ b/src/components/map/ha-entity-marker.ts @@ -1,10 +1,11 @@ import { LitElement, html, css } from "lit"; -import { property } from "lit/decorators"; +import { customElement, property } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; import type { HomeAssistant } from "../../types"; import { fireEvent } from "../../common/dom/fire_event"; import "../ha-state-icon"; +@customElement("ha-entity-marker") class HaEntityMarker extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -89,8 +90,6 @@ class HaEntityMarker extends LitElement { `; } -customElements.define("ha-entity-marker", HaEntityMarker); - declare global { interface HTMLElementTagNameMap { "ha-entity-marker": HaEntityMarker; diff --git a/src/dialogs/more-info/controls/more-info-camera.ts b/src/dialogs/more-info/controls/more-info-camera.ts index be5c689e83a3..9789d741abdc 100644 --- a/src/dialogs/more-info/controls/more-info-camera.ts +++ b/src/dialogs/more-info/controls/more-info-camera.ts @@ -1,5 +1,5 @@ import { css, html, LitElement, nothing } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { slugify } from "../../../common/string/slugify"; import "../../../components/buttons/ha-progress-button"; import "../../../components/ha-camera-stream"; @@ -9,6 +9,7 @@ import type { HomeAssistant } from "../../../types"; import { fileDownload } from "../../../util/file_download"; import { showToast } from "../../../util/toast"; +@customElement("more-info-camera") class MoreInfoCamera extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -112,8 +113,6 @@ class MoreInfoCamera extends LitElement { `; } -customElements.define("more-info-camera", MoreInfoCamera); - declare global { interface HTMLElementTagNameMap { "more-info-camera": MoreInfoCamera; diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts index 3b47c52c4586..a1727cecca43 100644 --- a/src/dialogs/more-info/controls/more-info-climate.ts +++ b/src/dialogs/more-info/controls/more-info-climate.ts @@ -7,7 +7,7 @@ import { } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { stopPropagation } from "../../../common/dom/stop_propagation"; import { supportsFeature } from "../../../common/entity/supports-feature"; import "../../../components/ha-attribute-icon"; @@ -32,6 +32,7 @@ import { moreInfoControlStyle } from "../components/more-info-control-style"; type MainControl = "temperature" | "humidity"; +@customElement("more-info-climate") class MoreInfoClimate extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -567,8 +568,6 @@ class MoreInfoClimate extends LitElement { } } -customElements.define("more-info-climate", MoreInfoClimate); - declare global { interface HTMLElementTagNameMap { "more-info-climate": MoreInfoClimate; diff --git a/src/dialogs/more-info/controls/more-info-group.ts b/src/dialogs/more-info/controls/more-info-group.ts index 0a4cf2f3ab82..b3f83360cbdc 100644 --- a/src/dialogs/more-info/controls/more-info-group.ts +++ b/src/dialogs/more-info/controls/more-info-group.ts @@ -1,7 +1,7 @@ import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { dynamicElement } from "../../../common/dom/dynamic-element-directive"; import type { GroupEntity } from "../../../data/group"; import { computeGroupDomain } from "../../../data/group"; @@ -13,6 +13,7 @@ import { importMoreInfoControl, } from "../state_more_info_control"; +@customElement("more-info-group") class MoreInfoGroup extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -106,8 +107,6 @@ class MoreInfoGroup extends LitElement { } } -customElements.define("more-info-group", MoreInfoGroup); - declare global { interface HTMLElementTagNameMap { "more-info-group": MoreInfoGroup; diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts index 71407b22a4af..c5dd951ba377 100644 --- a/src/dialogs/more-info/controls/more-info-humidifier.ts +++ b/src/dialogs/more-info/controls/more-info-humidifier.ts @@ -1,7 +1,7 @@ import { mdiPower, mdiTuneVariant } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { stopPropagation } from "../../../common/dom/stop_propagation"; import { supportsFeature } from "../../../common/entity/supports-feature"; import "../../../components/ha-control-select-menu"; @@ -15,6 +15,7 @@ import type { HomeAssistant } from "../../../types"; import "../components/ha-more-info-control-select-container"; import { moreInfoControlStyle } from "../components/more-info-control-style"; +@customElement("more-info-humidifier") class MoreInfoHumidifier extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -249,8 +250,6 @@ class MoreInfoHumidifier extends LitElement { } } -customElements.define("more-info-humidifier", MoreInfoHumidifier); - declare global { interface HTMLElementTagNameMap { "more-info-humidifier": MoreInfoHumidifier; diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index b19119718d49..35021a92d431 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -1,9 +1,10 @@ import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import "../components/ha-spinner"; import "../components/ha-button"; +@customElement("ha-init-page") class HaInitPage extends LitElement { @property({ type: Boolean }) public error = false; @@ -120,8 +121,6 @@ class HaInitPage extends LitElement { `; } -customElements.define("ha-init-page", HaInitPage); - declare global { interface HTMLElementTagNameMap { "ha-init-page": HaInitPage; diff --git a/src/managers/notification-manager.ts b/src/managers/notification-manager.ts index b469fb865aa9..3209f62079a9 100644 --- a/src/managers/notification-manager.ts +++ b/src/managers/notification-manager.ts @@ -1,6 +1,6 @@ import { mdiClose } from "@mdi/js"; import { html, LitElement, nothing } from "lit"; -import { property, query, state } from "lit/decorators"; +import { customElement, property, query, state } from "lit/decorators"; import type { LocalizeKeys } from "../common/translations/localize"; import "../components/ha-button"; import "../components/ha-icon-button"; @@ -26,6 +26,7 @@ export interface ToastActionParams { | { translationKey: LocalizeKeys; args?: Record }; } +@customElement("notification-manager") class NotificationManager extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -115,8 +116,6 @@ class NotificationManager extends LitElement { } } -customElements.define("notification-manager", NotificationManager); - declare global { interface HTMLElementTagNameMap { "notification-manager": NotificationManager; diff --git a/src/panels/calendar/dialog-calendar-event-detail.ts b/src/panels/calendar/dialog-calendar-event-detail.ts index 19cccf6dce59..50645b2bd21b 100644 --- a/src/panels/calendar/dialog-calendar-event-detail.ts +++ b/src/panels/calendar/dialog-calendar-event-detail.ts @@ -3,7 +3,7 @@ import { TZDate } from "@date-fns/tz"; import { addDays, isSameDay } from "date-fns"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { formatDate } from "../../common/datetime/format_date"; import { formatDateTime } from "../../common/datetime/format_date_time"; import { formatTime } from "../../common/datetime/format_time"; @@ -26,6 +26,7 @@ import type { CalendarEventDetailDialogParams } from "./show-dialog-calendar-eve import { showCalendarEventEditDialog } from "./show-dialog-calendar-event-editor"; import { resolveTimeZone } from "../../common/datetime/resolve-time-zone"; +@customElement("dialog-calendar-event-detail") class DialogCalendarEventDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -271,8 +272,3 @@ declare global { "dialog-calendar-event-detail": DialogCalendarEventDetail; } } - -customElements.define( - "dialog-calendar-event-detail", - DialogCalendarEventDetail -); diff --git a/src/panels/config/areas/dialog-area-registry-detail.ts b/src/panels/config/areas/dialog-area-registry-detail.ts index 7d3755aa3a13..31b2f772369c 100644 --- a/src/panels/config/areas/dialog-area-registry-detail.ts +++ b/src/panels/config/areas/dialog-area-registry-detail.ts @@ -1,7 +1,7 @@ import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/entity/ha-entity-picker"; import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker"; @@ -40,6 +40,7 @@ const SENSOR_DOMAINS = ["sensor"]; const TEMPERATURE_DEVICE_CLASSES = [SENSOR_DEVICE_CLASS_TEMPERATURE]; const HUMIDITY_DEVICE_CLASSES = [SENSOR_DEVICE_CLASS_HUMIDITY]; +@customElement("dialog-area-registry-detail") class DialogAreaDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -426,5 +427,3 @@ declare global { "dialog-area-registry-detail": DialogAreaDetail; } } - -customElements.define("dialog-area-registry-detail", DialogAreaDetail); diff --git a/src/panels/config/areas/dialog-floor-registry-detail.ts b/src/panels/config/areas/dialog-floor-registry-detail.ts index bafd9bf73cf3..985157463208 100644 --- a/src/panels/config/areas/dialog-floor-registry-detail.ts +++ b/src/panels/config/areas/dialog-floor-registry-detail.ts @@ -1,7 +1,7 @@ import { mdiTextureBox } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -27,6 +27,7 @@ import type { HomeAssistant } from "../../../types"; import { showAreaRegistryDetailDialog } from "./show-dialog-area-registry-detail"; import type { FloorRegistryDetailDialogParams } from "./show-dialog-floor-registry-detail"; +@customElement("dialog-floor-registry-detail") class DialogFloorDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -357,5 +358,3 @@ declare global { "dialog-floor-registry-detail": DialogFloorDetail; } } - -customElements.define("dialog-floor-registry-detail", DialogFloorDetail); diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index b1cf19f3361d..c1076b9c9175 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -23,7 +23,7 @@ import { import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } 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 { transform } from "../../../common/decorators/transform"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -112,6 +112,7 @@ declare global { } } +@customElement("ha-automation-editor") export class HaAutomationEditor extends PreventUnsavedMixin( KeyboardShortcutMixin(LitElement) ) { @@ -1339,5 +1340,3 @@ export class HaAutomationEditor extends PreventUnsavedMixin( ]; } } - -customElements.define("ha-automation-editor", HaAutomationEditor); diff --git a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts index c7c0ced613e5..180debd4495f 100644 --- a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts +++ b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts @@ -1,7 +1,7 @@ import { mdiOpenInNew } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; -import { state } from "lit/decorators"; +import { customElement, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import { createCloseHeading } from "../../../../components/ha-dialog"; import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box"; @@ -13,6 +13,7 @@ import type { WebhookDialogParams } from "./show-dialog-manage-cloudhook"; import "../../../../components/ha-button"; import "../../../../components/ha-copy-textfield"; +@customElement("dialog-manage-cloudhook") export class DialogManageCloudhook extends LitElement { protected hass?: HomeAssistant; @@ -155,5 +156,3 @@ declare global { "dialog-manage-cloudhook": DialogManageCloudhook; } } - -customElements.define("dialog-manage-cloudhook", DialogManageCloudhook); diff --git a/src/panels/config/helpers/forms/dialog-schedule-block-info.ts b/src/panels/config/helpers/forms/dialog-schedule-block-info.ts index 9c5142c19d25..df53e0859df2 100644 --- a/src/panels/config/helpers/forms/dialog-schedule-block-info.ts +++ b/src/panels/config/helpers/forms/dialog-schedule-block-info.ts @@ -1,7 +1,7 @@ import type { CSSResultGroup } from "lit"; import { html, LitElement, nothing } from "lit"; import memoizeOne from "memoize-one"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import { createCloseHeading } from "../../../../components/ha-dialog"; import "../../../../components/ha-form/ha-form"; @@ -14,6 +14,7 @@ import type { } from "./show-dialog-schedule-block-info"; import type { SchemaUnion } from "../../../../components/ha-form/types"; +@customElement("dialog-schedule-block-info") class DialogScheduleBlockInfo extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -156,5 +157,3 @@ declare global { "dialog-schedule-block-info": DialogScheduleBlockInfo; } } - -customElements.define("dialog-schedule-block-info", DialogScheduleBlockInfo); diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts index 475dedecb69e..2d59dc04c41c 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts @@ -1,6 +1,6 @@ import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { stopPropagation } from "../../../../../common/dom/stop_propagation"; import "../../../../../components/buttons/ha-call-service-button"; import "../../../../../components/ha-card"; @@ -15,6 +15,7 @@ import type { HomeAssistant } from "../../../../../types"; import { formatAsPaddedHex } from "./functions"; import type { IssueCommandServiceData } from "./types"; +@customElement("zha-cluster-commands") export class ZHAClusterCommands extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; @@ -259,5 +260,3 @@ declare global { "zha-cluster-commands": ZHAClusterCommands; } } - -customElements.define("zha-cluster-commands", ZHAClusterCommands); diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts index a3127bd5c711..4983445c3ce7 100644 --- a/src/panels/config/logs/dialog-system-log-detail.ts +++ b/src/panels/config/logs/dialog-system-log-detail.ts @@ -1,7 +1,7 @@ import { mdiClose, mdiContentCopy } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import { copyToClipboard } from "../../../common/util/copy-clipboard"; import "../../../components/ha-alert"; @@ -26,6 +26,7 @@ import { showToast } from "../../../util/toast"; import type { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail"; import { formatSystemLogTime } from "./util"; +@customElement("dialog-system-log-detail") class DialogSystemLogDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -272,5 +273,3 @@ declare global { "dialog-system-log-detail": DialogSystemLogDetail; } } - -customElements.define("dialog-system-log-detail", DialogSystemLogDetail); diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index 1fe25f814760..a3f60e21c9b3 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/src/panels/config/person/dialog-person-detail.ts @@ -1,7 +1,7 @@ import { mdiPencil } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "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 "../../../components/entity/ha-entities-picker"; @@ -43,6 +43,7 @@ const cropOptions: CropOptions = { aspectRatio: 1, }; +@customElement("dialog-person-detail") class DialogPersonDetail extends LitElement implements HassDialog { @property({ attribute: false }) public hass!: HomeAssistant; @@ -567,5 +568,3 @@ declare global { "dialog-person-detail": DialogPersonDetail; } } - -customElements.define("dialog-person-detail", DialogPersonDetail); diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index bd86392d228d..037d77dac627 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -21,7 +21,7 @@ import { } from "@mdi/js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } 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 { fireEvent } from "../../../common/dom/fire_event"; import { goBack, navigate } from "../../../common/navigate"; @@ -79,6 +79,7 @@ import "./manual-script-editor"; import type { HaManualScriptEditor } from "./manual-script-editor"; import { showAutomationSaveTimeoutDialog } from "../automation/automation-save-timeout-dialog/show-dialog-automation-save-timeout"; +@customElement("ha-script-editor") export class HaScriptEditor extends SubscribeMixin( PreventUnsavedMixin(KeyboardShortcutMixin(LitElement)) ) { @@ -1278,8 +1279,6 @@ export class HaScriptEditor extends SubscribeMixin( } } -customElements.define("ha-script-editor", HaScriptEditor); - declare global { interface HTMLElementTagNameMap { "ha-script-editor": HaScriptEditor; diff --git a/src/panels/config/voice-assistants/cloud-alexa-pref.ts b/src/panels/config/voice-assistants/cloud-alexa-pref.ts index 5fadf0abc25f..1898957d5de8 100644 --- a/src/panels/config/voice-assistants/cloud-alexa-pref.ts +++ b/src/panels/config/voice-assistants/cloud-alexa-pref.ts @@ -1,6 +1,6 @@ import { mdiHelpCircle } from "@mdi/js"; import { css, html, LitElement, nothing } from "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 { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter"; @@ -20,6 +20,7 @@ import { import type { HomeAssistant } from "../../../types"; import { brandsUrl } from "../../../util/brands-url"; +@customElement("cloud-alexa-pref") export class CloudAlexaPref extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -297,5 +298,3 @@ declare global { "cloud-alexa-pref": CloudAlexaPref; } } - -customElements.define("cloud-alexa-pref", CloudAlexaPref); diff --git a/src/panels/config/voice-assistants/cloud-google-pref.ts b/src/panels/config/voice-assistants/cloud-google-pref.ts index a91bda61a9e9..9c8b8b4c3c27 100644 --- a/src/panels/config/voice-assistants/cloud-google-pref.ts +++ b/src/panels/config/voice-assistants/cloud-google-pref.ts @@ -1,6 +1,6 @@ import { mdiHelpCircle } from "@mdi/js"; import { css, html, LitElement, nothing } from "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 { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter"; @@ -23,6 +23,7 @@ import type { HomeAssistant } from "../../../types"; import { brandsUrl } from "../../../util/brands-url"; import { showSaveSuccessToast } from "../../../util/toast-saved-success"; +@customElement("cloud-google-pref") export class CloudGooglePref extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -367,5 +368,3 @@ declare global { "cloud-google-pref": CloudGooglePref; } } - -customElements.define("cloud-google-pref", CloudGooglePref); diff --git a/src/panels/config/zone/dialog-home-zone-detail.ts b/src/panels/config/zone/dialog-home-zone-detail.ts index 47a6e3c0acb4..08e12f4e8026 100644 --- a/src/panels/config/zone/dialog-home-zone-detail.ts +++ b/src/panels/config/zone/dialog-home-zone-detail.ts @@ -1,6 +1,6 @@ import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "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 { createCloseHeading } from "../../../components/ha-dialog"; @@ -19,6 +19,7 @@ const SCHEMA = [ }, ]; +@customElement("dialog-home-zone-detail") class DialogHomeZoneDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -151,5 +152,3 @@ declare global { "dialog-home-zone-detail": DialogHomeZoneDetail; } } - -customElements.define("dialog-home-zone-detail", DialogHomeZoneDetail); diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts index da9aa4615a9b..33a877905377 100644 --- a/src/panels/config/zone/dialog-zone-detail.ts +++ b/src/panels/config/zone/dialog-zone-detail.ts @@ -1,6 +1,6 @@ import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "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 { addDistanceToCoord } from "../../../common/location/add_distance_to_coord"; @@ -14,6 +14,7 @@ import { haStyleDialog } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import type { ZoneDetailDialogParams } from "./show-dialog-zone-detail"; +@customElement("dialog-zone-detail") class DialogZoneDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -241,5 +242,3 @@ declare global { "dialog-zone-detail": DialogZoneDetail; } } - -customElements.define("dialog-zone-detail", DialogZoneDetail); diff --git a/src/panels/custom/ha-panel-custom.ts b/src/panels/custom/ha-panel-custom.ts index d547bd357296..38d9ce47161a 100644 --- a/src/panels/custom/ha-panel-custom.ts +++ b/src/panels/custom/ha-panel-custom.ts @@ -1,6 +1,6 @@ import type { PropertyValues } from "lit"; import { ReactiveElement } from "lit"; -import { property } from "lit/decorators"; +import { customElement, property } from "lit/decorators"; import type { NavigateOptions } from "../../common/navigate"; import { navigate } from "../../common/navigate"; import { deepEqual } from "../../common/util/deep-equal"; @@ -22,6 +22,7 @@ declare global { } } +@customElement("ha-panel-custom") export class HaPanelCustom extends ReactiveElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -171,5 +172,3 @@ export class HaPanelCustom extends ReactiveElement { iframeDoc.close(); } } - -customElements.define("ha-panel-custom", HaPanelCustom); diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index c62e9142b981..64675ed020cf 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -12,7 +12,7 @@ import type { } from "home-assistant-js-websocket/dist/types"; import type { PropertyValues } from "lit"; import { LitElement, css, html } from "lit"; -import { property, query, state } from "lit/decorators"; +import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { ensureArray } from "../../common/array/ensure-array"; import { storage } from "../../common/decorators/storage"; @@ -52,6 +52,7 @@ import type { HomeAssistant } from "../../types"; import { fileDownload } from "../../util/file_download"; import { addEntitiesToLovelaceView } from "../lovelace/editor/add-entities-to-view"; +@customElement("ha-panel-history") class HaPanelHistory extends LitElement { @property({ attribute: false }) hass!: HomeAssistant; @@ -679,8 +680,6 @@ class HaPanelHistory extends LitElement { } } -customElements.define("ha-panel-history", HaPanelHistory); - declare global { interface HTMLElementTagNameMap { "ha-panel-history": HaPanelHistory; diff --git a/src/panels/lovelace/cards/hui-grid-card.ts b/src/panels/lovelace/cards/hui-grid-card.ts index 00ec6623ded3..f92c71031ca5 100644 --- a/src/panels/lovelace/cards/hui-grid-card.ts +++ b/src/panels/lovelace/cards/hui-grid-card.ts @@ -1,5 +1,6 @@ import type { CSSResultGroup } from "lit"; import { css } from "lit"; +import { customElement } from "lit/decorators"; import { computeCardSize } from "../common/compute-card-size"; import type { LovelaceCardEditor } from "../types"; import { HuiStackCard } from "./hui-stack-card"; @@ -12,6 +13,7 @@ const SQUARE_ROW_HEIGHTS_BY_COLUMNS = { 3: 2, }; +@customElement("hui-grid-card") class HuiGridCard extends HuiStackCard { public static async getConfigElement(): Promise { await import("../editor/config-elements/hui-grid-card-editor"); @@ -115,5 +117,3 @@ declare global { "hui-grid-card": HuiGridCard; } } - -customElements.define("hui-grid-card", HuiGridCard); diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.ts b/src/panels/lovelace/cards/hui-vertical-stack-card.ts index e259211b47f7..8500cdec2b11 100644 --- a/src/panels/lovelace/cards/hui-vertical-stack-card.ts +++ b/src/panels/lovelace/cards/hui-vertical-stack-card.ts @@ -1,8 +1,10 @@ import type { CSSResultGroup } from "lit"; import { css } from "lit"; +import { customElement } from "lit/decorators"; import { computeCardSize } from "../common/compute-card-size"; import { HuiStackCard } from "./hui-stack-card"; +@customElement("hui-vertical-stack-card") class HuiVerticalStackCard extends HuiStackCard { public async getCardSize() { if (!this._cards) { @@ -40,5 +42,3 @@ declare global { "hui-vertical-stack-card": HuiVerticalStackCard; } } - -customElements.define("hui-vertical-stack-card", HuiVerticalStackCard); diff --git a/src/panels/lovelace/common/directives/action-handler-directive.ts b/src/panels/lovelace/common/directives/action-handler-directive.ts index 3225bd912ce0..11e33f449fcb 100644 --- a/src/panels/lovelace/common/directives/action-handler-directive.ts +++ b/src/panels/lovelace/common/directives/action-handler-directive.ts @@ -1,5 +1,6 @@ /* eslint-disable max-classes-per-file */ import { noChange } from "lit"; +import { customElement } from "lit/decorators"; import type { AttributePart, DirectiveParameters } from "lit/directive"; import { directive, Directive } from "lit/directive"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -32,6 +33,7 @@ declare global { } } +@customElement("action-handler") class ActionHandler extends HTMLElement implements ActionHandlerType { public holdTime = 500; @@ -226,8 +228,6 @@ class ActionHandler extends HTMLElement implements ActionHandlerType { } } -customElements.define("action-handler", ActionHandler); - const getActionHandler = (): ActionHandlerType => { const body = document.body; if (body.querySelector("action-handler")) { diff --git a/src/panels/lovelace/elements/hui-conditional-element.ts b/src/panels/lovelace/elements/hui-conditional-element.ts index b2998798204e..d4744c7f8533 100644 --- a/src/panels/lovelace/elements/hui-conditional-element.ts +++ b/src/panels/lovelace/elements/hui-conditional-element.ts @@ -1,3 +1,4 @@ +import { customElement } from "lit/decorators"; import type { HomeAssistant } from "../../../types"; import { createStyledHuiElement } from "../cards/picture-elements/create-styled-hui-element"; import { @@ -11,6 +12,7 @@ import type { LovelaceElementConfig, } from "./types"; +@customElement("hui-conditional-element") class HuiConditionalElement extends HTMLElement implements LovelaceElement { public static async getConfigElement(): Promise { await import( @@ -86,5 +88,3 @@ declare global { "hui-conditional-element": HuiConditionalElement; } } - -customElements.define("hui-conditional-element", HuiConditionalElement); diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index 084ff7f9ba97..4ada0939cca0 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -1,7 +1,7 @@ import { mdiPlus } from "@mdi/js"; import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import { nextRender } from "../../../common/util/render-status"; import "../../../components/entity/ha-state-label-badge"; @@ -33,6 +33,7 @@ const getColumnIndex = (columnSizes: number[], size: number) => { return minIndex; }; +@customElement("hui-masonry-view") export class MasonryView extends LitElement implements LovelaceViewElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -356,5 +357,3 @@ declare global { "hui-masonry-view": MasonryView; } } - -customElements.define("hui-masonry-view", MasonryView); diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts index ef31e52993cc..5ff0de02a8b9 100644 --- a/src/panels/lovelace/views/hui-panel-view.ts +++ b/src/panels/lovelace/views/hui-panel-view.ts @@ -1,7 +1,7 @@ import { mdiPlus } from "@mdi/js"; import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeRTL } from "../../../common/util/compute_rtl"; @@ -15,6 +15,7 @@ import type { Lovelace } from "../types"; let editCodeLoaded = false; +@customElement("hui-panel-view") export class PanelView extends LitElement implements LovelaceViewElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -153,5 +154,3 @@ declare global { "hui-panel-view": PanelView; } } - -customElements.define("hui-panel-view", PanelView); diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts index c05ae5a40342..0d1a290deafb 100644 --- a/src/panels/lovelace/views/hui-sidebar-view.ts +++ b/src/panels/lovelace/views/hui-sidebar-view.ts @@ -1,7 +1,7 @@ import { mdiArrowLeft, mdiArrowRight, mdiPlus } from "@mdi/js"; import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; -import { property, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import type { LovelaceViewElement } from "../../../data/lovelace"; import type { LovelaceViewConfig } from "../../../data/lovelace/config/view"; @@ -13,6 +13,7 @@ import type { HuiCardOptions } from "../components/hui-card-options"; import { replaceCard } from "../editor/config-util"; import type { Lovelace } from "../types"; +@customElement("hui-sidebar-view") export class SideBarView extends LitElement implements LovelaceViewElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -257,4 +258,3 @@ declare global { } } -customElements.define("hui-sidebar-view", SideBarView); From 99c752e74639ac973d9b9e515d65d42cab673bb2 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sat, 29 Nov 2025 23:05:35 -0500 Subject: [PATCH 2/3] Ignore --- .../lovelace/common/directives/action-handler-directive.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/panels/lovelace/common/directives/action-handler-directive.ts b/src/panels/lovelace/common/directives/action-handler-directive.ts index 11e33f449fcb..072949f4da0e 100644 --- a/src/panels/lovelace/common/directives/action-handler-directive.ts +++ b/src/panels/lovelace/common/directives/action-handler-directive.ts @@ -45,6 +45,7 @@ class ActionHandler extends HTMLElement implements ActionHandlerType { private dblClickTimeout?: number; + // eslint-disable-next-line lit/lifecycle-super -- not a LitElement public connectedCallback() { Object.assign(this.style, { position: "fixed", From 30518286f85a2f2a5bd66f32c543377cacab3a6f Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sat, 29 Nov 2025 23:09:46 -0500 Subject: [PATCH 3/3] prettier --- src/panels/lovelace/views/hui-sidebar-view.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts index 0d1a290deafb..f4c196195cd9 100644 --- a/src/panels/lovelace/views/hui-sidebar-view.ts +++ b/src/panels/lovelace/views/hui-sidebar-view.ts @@ -257,4 +257,3 @@ declare global { "hui-sidebar-view": SideBarView; } } -