Add compatibility for Lit 2.0 (#8878)

cast/src/launcher/layout/hc-cast.ts

@@ -3,12 +3,12 @@ import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
   property,
-  internalProperty,
+  state,
   TemplateResult,
 } from "lit-element";
 import { CastManager } from "../../../../src/cast/cast_manager";
@@ -42,9 +42,9 @@ class HcCast extends LitElement {
 
   @property() public castManager!: CastManager;
 
-  @internalProperty() private askWrite = false;
+  @state() private askWrite = false;
 
-  @internalProperty() private lovelaceConfig?: LovelaceConfig | null;
+  @state() private lovelaceConfig?: LovelaceConfig | null;
 
   protected render(): TemplateResult {
     if (this.lovelaceConfig === undefined) {
@@ -204,7 +204,7 @@ class HcCast extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .center-item {
         display: flex;

cast/src/launcher/layout/hc-connect.ts

@@ -13,12 +13,12 @@ import {
 } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
   TemplateResult,
-  internalProperty,
+  state,
 } from "lit-element";
 import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
@@ -60,19 +60,19 @@ const INTRO = html`
 
 @customElement("hc-connect")
 export class HcConnect extends LitElement {
-  @internalProperty() private loading = false;
+  @state() private loading = false;
 
   // If we had stored credentials but we cannot connect,
   // show a screen asking retry or logout.
-  @internalProperty() private cannotConnect = false;
+  @state() private cannotConnect = false;
 
-  @internalProperty() private error?: string | TemplateResult;
+  @state() private error?: string | TemplateResult;
 
-  @internalProperty() private auth?: Auth;
+  @state() private auth?: Auth;
 
-  @internalProperty() private connection?: Connection;
+  @state() private connection?: Connection;
 
-  @internalProperty() private castManager?: CastManager | null;
+  @state() private castManager?: CastManager | null;
 
   private openDemo = false;
 
@@ -297,7 +297,7 @@ export class HcConnect extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .card-content a {
         color: var(--primary-color);

cast/src/launcher/layout/hc-layout.ts

@@ -6,7 +6,7 @@ import {
 } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -69,7 +69,7 @@ class HcLayout extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;

cast/src/receiver/layout/hc-demo.ts

@@ -1,7 +1,7 @@
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   property,
   TemplateResult,
 } from "lit-element";
@@ -21,7 +21,7 @@ import "./hc-lovelace";
 class HcDemo extends HassElement {
   @property({ attribute: false }) public lovelacePath!: string;
 
-  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
+  @state() private _lovelaceConfig?: LovelaceConfig;
 
   protected render(): TemplateResult {
     if (!this._lovelaceConfig) {

cast/src/receiver/layout/hc-launch-screen.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -29,7 +29,7 @@ class HcLaunchScreen extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

cast/src/receiver/layout/hc-lovelace.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -91,7 +91,7 @@ class HcLovelace extends LitElement {
     return undefined;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         min-height: 100vh;

cast/src/receiver/layout/hc-main.ts

@@ -3,12 +3,7 @@ import {
   getAuth,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  internalProperty,
-  TemplateResult,
-} from "lit-element";
+import { customElement, html, state, TemplateResult } from "lit-element";
 import { CAST_NS } from "../../../../src/cast/const";
 import {
   ConnectMessage,
@@ -36,13 +31,13 @@ let resourcesLoaded = false;
 
 @customElement("hc-main")
 export class HcMain extends HassElement {
-  @internalProperty() private _showDemo = false;
+  @state() private _showDemo = false;
 
-  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
+  @state() private _lovelaceConfig?: LovelaceConfig;
 
-  @internalProperty() private _lovelacePath: string | number | null = null;
+  @state() private _lovelacePath: string | number | null = null;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   private _unsubLovelace?: UnsubscribeFunc;
 

demo/src/custom-cards/cast-demo-row.ts

@@ -1,9 +1,9 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   TemplateResult,
 } from "lit-element";
@@ -20,7 +20,7 @@ import { HomeAssistant } from "../../../src/types";
 class CastDemoRow extends LitElement implements LovelaceRow {
   public hass!: HomeAssistant;
 
-  @internalProperty() private _castManager?: CastManager | null;
+  @state() private _castManager?: CastManager | null;
 
   public setConfig(_config: CastConfig): void {
     // No config possible.
@@ -73,7 +73,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     this.style.display = this._castManager ? "" : "none";
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;

demo/src/custom-cards/ha-demo-card.ts

@@ -1,9 +1,9 @@
 import "@material/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -26,7 +26,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass!: MockHomeAssistant;
 
-  @internalProperty() private _switching?: boolean;
+  @state() private _switching?: boolean;
 
   private _hidden = localStorage.hide_demo_card;
 
@@ -113,7 +113,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         a {

gallery/src/demos/demo-automation-trace.ts

@@ -4,7 +4,7 @@ import {
   css,
   LitElement,
   TemplateResult,
-  internalProperty,
+  state,
   property,
 } from "lit-element";
 import "../../../src/components/ha-card";
@@ -22,7 +22,7 @@ const traces: DemoTrace[] = [basicTrace, motionLightTrace];
 export class DemoAutomationTrace extends LitElement {
   @property({ attribute: false }) hass?: HomeAssistant;
 
-  @internalProperty() private _selected = {};
+  @state() private _selected = {};
 
   protected render(): TemplateResult {
     if (!this.hass) {

gallery/src/demos/demo-integration-card.ts

@@ -2,7 +2,7 @@ import {
   customElement,
   html,
   css,
-  internalProperty,
+  state,
   LitElement,
   TemplateResult,
   property,
@@ -220,9 +220,9 @@ const createDeviceRegistryEntries = (
 export class DemoIntegrationCard extends LitElement {
   @property({ attribute: false }) hass?: HomeAssistant;
 
-  @internalProperty() isCustomIntegration = false;
+  @state() isCustomIntegration = false;
 
-  @internalProperty() isCloud = false;
+  @state() isCloud = false;
 
   protected render(): TemplateResult {
     if (!this.hass) {

hassio/src/addon-store/hassio-addon-repository.ts

@@ -1,7 +1,7 @@
 import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   html,
   LitElement,
   property,
@@ -129,7 +129,7 @@ class HassioAddonRepositoryEl extends LitElement {
     navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       hassioStyle,
       css`

hassio/src/addon-store/hassio-addon-store.ts

@@ -4,8 +4,8 @@ import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import {
   css,
-  CSSResult,
-  internalProperty,
+  CSSResultGroup,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -58,7 +58,7 @@ class HassioAddonStore extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @internalProperty() private _filter?: string;
+  @state() private _filter?: string;
 
   public async refreshData() {
     await reloadHassioAddons(this.hass);
@@ -218,7 +218,7 @@ class HassioAddonStore extends LitElement {
     this._filter = e.detail.value;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       hassio-addon-repository {
         margin-top: 24px;

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -4,10 +4,10 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -39,15 +39,15 @@ class HassioAddonAudio extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _inputDevices?: HassioHardwareAudioDevice[];
+  @state() private _inputDevices?: HassioHardwareAudioDevice[];
 
-  @internalProperty() private _outputDevices?: HassioHardwareAudioDevice[];
+  @state() private _outputDevices?: HassioHardwareAudioDevice[];
 
-  @internalProperty() private _selectedInput!: null | string;
+  @state() private _selectedInput!: null | string;
 
-  @internalProperty() private _selectedOutput!: null | string;
+  @state() private _selectedOutput!: null | string;
 
   protected render(): TemplateResult {
     return html`
@@ -109,7 +109,7 @@ class HassioAddonAudio extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/addon-view/config/hassio-addon-config-tab.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -70,7 +70,7 @@ class HassioAddonConfigDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -5,10 +5,10 @@ import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -53,15 +53,15 @@ class HassioAddonConfig extends LitElement {
 
   @property({ type: Boolean }) private _valid = true;
 
-  @internalProperty() private _canShowSchema = false;
+  @state() private _canShowSchema = false;
 
-  @internalProperty() private _showOptional = false;
+  @state() private _showOptional = false;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _options?: Record<string, unknown>;
+  @state() private _options?: Record<string, unknown>;
 
-  @internalProperty() private _yamlMode = false;
+  @state() private _yamlMode = false;
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
@@ -292,7 +292,7 @@ class HassioAddonConfig extends LitElement {
     fireEvent(this, "hass-api-called", eventdata);
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -1,10 +1,10 @@
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -43,9 +43,9 @@ class HassioAddonNetwork extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _config?: NetworkItem[];
+  @state() private _config?: NetworkItem[];
 
   public connectedCallback(): void {
     super.connectedCallback();
@@ -216,7 +216,7 @@ class HassioAddonNetwork extends LitElement {
     button.progress = false;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -1,10 +1,10 @@
 import "../../../../src/components/ha-card";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -30,9 +30,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
 
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _content?: string;
+  @state() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();
@@ -57,7 +57,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/addon-view/hassio-addon-dashboard.ts

@@ -6,10 +6,10 @@ import {
 } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -52,7 +52,7 @@ class HassioAddonDashboard extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() _error?: string;
+  @state() _error?: string;
 
   private _computeTail = memoizeOne((route: Route) => {
     const dividerPos = route.path.indexOf("/", 1);
@@ -133,7 +133,7 @@ class HassioAddonDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/addon-view/info/hassio-addon-info-tab.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -42,7 +42,7 @@ class HassioAddonInfoDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -16,10 +16,10 @@ import {
 } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -90,9 +90,9 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _metrics?: HassioStats;
+  @state() private _metrics?: HassioStats;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   private _addonStoreInfo = memoizeOne(
     (slug: string, storeAddons: StoreAddon[]) =>
@@ -1098,7 +1098,7 @@ class HassioAddonInfo extends LitElement {
     button.progress = false;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/addon-view/log/hassio-addon-log-tab.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -38,7 +38,7 @@ class HassioAddonLogDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -1,10 +1,10 @@
 import "@material/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -29,9 +29,9 @@ class HassioAddonLogs extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _content?: string;
+  @state() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();
@@ -59,7 +59,7 @@ class HassioAddonLogs extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/components/hassio-ansi-to-html.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -25,7 +25,7 @@ class HassioAnsiToHtml extends LitElement {
     return html`${this._parseTextToColoredPre(this.content)}`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       pre {
         overflow-x: auto;

hassio/src/components/hassio-card-content.ts

@@ -1,7 +1,7 @@
 import { mdiHelpCircle } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -77,7 +77,7 @@ class HassioCardContent extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon {
         margin-right: 24px;

hassio/src/components/hassio-upload-snapshot.ts

@@ -5,7 +5,7 @@ import "@polymer/paper-input/paper-input-container";
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   TemplateResult,
 } from "lit-element";
@@ -33,9 +33,9 @@ const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
 export class HassioUploadSnapshot extends LitElement {
   public hass!: HomeAssistant;
 
-  @internalProperty() public value: string | null = null;
+  @state() public value: string | null = null;
 
-  @internalProperty() private _uploading = false;
+  @state() private _uploading = false;
 
   public render(): TemplateResult {
     return html`

hassio/src/components/supervisor-metric.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -37,7 +37,7 @@ class SupervisorMetric extends LitElement {
     </ha-settings-row>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-settings-row {
         padding: 0;

hassio/src/dashboard/hassio-addons.ts

@@ -1,7 +1,7 @@
 import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -90,7 +90,7 @@ class HassioAddons extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/dashboard/hassio-dashboard.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -53,7 +53,7 @@ class HassioDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`

hassio/src/dashboard/hassio-update.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import { mdiHomeAssistant } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -233,7 +233,7 @@ export class HassioUpdate extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/dialogs/markdown/dialog-hassio-markdown.ts

@@ -1,9 +1,9 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -23,7 +23,7 @@ class HassioMarkdownDialog extends LitElement {
 
   @property() public content!: string;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
   public showDialog(params: HassioMarkdownDialogParams) {
     this.title = params.title;
@@ -50,7 +50,7 @@ class HassioMarkdownDialog extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       hassioStyle,

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -8,10 +8,10 @@ import { mdiClose } from "@mdi/js";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -54,23 +54,23 @@ export class DialogHassioNetwork
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _accessPoints?: AccessPoints;
+  @state() private _accessPoints?: AccessPoints;
 
-  @internalProperty() private _curTabIndex = 0;
+  @state() private _curTabIndex = 0;
 
-  @internalProperty() private _dirty = false;
+  @state() private _dirty = false;
 
-  @internalProperty() private _interface?: NetworkInterface;
+  @state() private _interface?: NetworkInterface;
 
-  @internalProperty() private _interfaces!: NetworkInterface[];
+  @state() private _interfaces!: NetworkInterface[];
 
-  @internalProperty() private _params?: HassioNetworkDialogParams;
+  @state() private _params?: HassioNetworkDialogParams;
 
-  @internalProperty() private _processing = false;
+  @state() private _processing = false;
 
-  @internalProperty() private _scanning = false;
+  @state() private _scanning = false;
 
-  @internalProperty() private _wifiConfiguration?: WifiConfiguration;
+  @state() private _wifiConfiguration?: WifiConfiguration;
 
   public async showDialog(params: HassioNetworkDialogParams): Promise<void> {
     this._params = params;
@@ -543,7 +543,7 @@ export class DialogHassioNetwork
     this._wifiConfiguration![id] = value;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -5,10 +5,10 @@ import { mdiDelete } from "@mdi/js";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -39,15 +39,15 @@ class HassioRegistriesDialog extends LitElement {
     username: string;
   }[];
 
-  @internalProperty() private _registry?: string;
+  @state() private _registry?: string;
 
-  @internalProperty() private _username?: string;
+  @state() private _username?: string;
 
-  @internalProperty() private _password?: string;
+  @state() private _password?: string;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _addingRegistry = false;
+  @state() private _addingRegistry = false;
 
   protected render(): TemplateResult {
     return html`
@@ -220,7 +220,7 @@ class HassioRegistriesDialog extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -7,10 +7,10 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   query,
@@ -37,15 +37,15 @@ class HassioRepositoriesDialog extends LitElement {
 
   @query("#repository_input", true) private _optionInput?: PaperInputElement;
 
-  @internalProperty() private _repositories?: HassioAddonRepository[];
+  @state() private _repositories?: HassioAddonRepository[];
 
-  @internalProperty() private _dialogParams?: HassioRepositoryDialogParams;
+  @state() private _dialogParams?: HassioRepositoryDialogParams;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _processing = false;
+  @state() private _processing = false;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   public async showDialog(
     dialogParams: HassioRepositoryDialogParams
@@ -137,7 +137,7 @@ class HassioRepositoriesDialog extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,

hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts

@@ -1,10 +1,10 @@
 import { mdiClose } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -23,7 +23,7 @@ export class DialogHassioSnapshotUpload
   implements HassDialog<HassioSnapshotUploadDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: HassioSnapshotUploadDialogParams;
+  @state() private _params?: HassioSnapshotUploadDialogParams;
 
   public async showDialog(
     params: HassioSnapshotUploadDialogParams
@@ -78,7 +78,7 @@ export class DialogHassioSnapshotUpload
     this.closeDialog();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`

hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts

@@ -5,10 +5,10 @@ import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbo
 import "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -80,21 +80,21 @@ class HassioSnapshotDialog extends LitElement {
 
   @property({ attribute: false }) public supervisor?: Supervisor;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _onboarding = false;
+  @state() private _onboarding = false;
 
-  @internalProperty() private _snapshot?: HassioSnapshotDetail;
+  @state() private _snapshot?: HassioSnapshotDetail;
 
-  @internalProperty() private _folders!: FolderItem[];
+  @state() private _folders!: FolderItem[];
 
-  @internalProperty() private _addons!: AddonItem[];
+  @state() private _addons!: AddonItem[];
 
-  @internalProperty() private _dialogParams?: HassioSnapshotDialogParams;
+  @state() private _dialogParams?: HassioSnapshotDialogParams;
 
-  @internalProperty() private _snapshotPassword!: string;
+  @state() private _snapshotPassword!: string;
 
-  @internalProperty() private _restoreHass = true;
+  @state() private _restoreHass = true;
 
   public async showDialog(params: HassioSnapshotDialogParams) {
     this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
@@ -235,7 +235,7 @@ class HassioSnapshotDialog extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,

hassio/src/dialogs/update/dialog-supervisor-update.ts

@@ -1,10 +1,10 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   TemplateResult,
 } from "lit-element";
@@ -27,15 +27,15 @@ import { SupervisorDialogSupervisorUpdateParams } from "./show-dialog-update";
 class DialogSupervisorUpdate extends LitElement {
   public hass!: HomeAssistant;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _createSnapshot = true;
+  @state() private _createSnapshot = true;
 
-  @internalProperty() private _action: "snapshot" | "update" | null = null;
+  @state() private _action: "snapshot" | "update" | null = null;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty()
+  @state()
   private _dialogParams?: SupervisorDialogSupervisorUpdateParams;
 
   public async showDialog(
@@ -173,7 +173,7 @@ class DialogSupervisorUpdate extends LitElement {
     this.closeDialog();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,

hassio/src/hassio-my-redirect.ts

@@ -1,7 +1,7 @@
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -59,7 +59,7 @@ class HassioMyRedirect extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @internalProperty() public _error?: TemplateResult | string;
+  @state() public _error?: TemplateResult | string;
 
   connectedCallback() {
     super.connectedCallback();

hassio/src/hassio-panel.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -46,7 +46,7 @@ class HassioPanel extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         --app-header-background-color: var(--sidebar-background-color);

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -1,10 +1,10 @@
 import { mdiMenu } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -33,7 +33,7 @@ class HassioIngressView extends LitElement {
 
   @property() public ingressPanel = false;
 
-  @internalProperty() private _addon?: HassioAddonDetails;
+  @state() private _addon?: HassioAddonDetails;
 
   @property({ type: Boolean })
   public narrow = false;
@@ -162,7 +162,7 @@ class HassioIngressView extends LitElement {
     fireEvent(this, "hass-toggle-menu");
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       iframe {
         display: block;

hassio/src/snapshots/hassio-snapshots.ts

@@ -16,10 +16,10 @@ import "@polymer/paper-radio-group/paper-radio-group";
 import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -69,19 +69,19 @@ class HassioSnapshots extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _snapshotName = "";
+  @state() private _snapshotName = "";
 
-  @internalProperty() private _snapshotPassword = "";
+  @state() private _snapshotPassword = "";
 
-  @internalProperty() private _snapshotHasPassword = false;
+  @state() private _snapshotHasPassword = false;
 
-  @internalProperty() private _snapshotType: HassioSnapshot["type"] = "full";
+  @state() private _snapshotType: HassioSnapshot["type"] = "full";
 
-  @internalProperty() private _snapshots?: HassioSnapshot[] = [];
+  @state() private _snapshots?: HassioSnapshot[] = [];
 
-  @internalProperty() private _addonList: CheckboxItem[] = [];
+  @state() private _addonList: CheckboxItem[] = [];
 
-  @internalProperty() private _folderList: CheckboxItem[] = [
+  @state() private _folderList: CheckboxItem[] = [
     {
       slug: "homeassistant",
       checked: true,
@@ -92,7 +92,7 @@ class HassioSnapshots extends LitElement {
     { slug: "addons/local", checked: true },
   ];
 
-  @internalProperty() private _error = "";
+  @state() private _error = "";
 
   public async refreshData() {
     await reloadHassioSnapshots(this.hass);
@@ -428,7 +428,7 @@ class HassioSnapshots extends LitElement {
     });
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/supervisor-base-element.ts

@@ -1,10 +1,5 @@
 import { Collection, UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { state, LitElement, property, PropertyValues } from "lit-element";
 import { atLeastVersion } from "../../src/common/config/version";
 import { computeLocalize } from "../../src/common/translations/localize";
 import { fetchHassioAddonsInfo } from "../../src/data/hassio/addon";
@@ -46,14 +41,11 @@ export class SupervisorBaseElement extends urlSyncMixin(
     localize: () => "",
   };
 
-  @internalProperty() private _unsubs: Record<string, UnsubscribeFunc> = {};
+  @state() private _unsubs: Record<string, UnsubscribeFunc> = {};
 
-  @internalProperty() private _collections: Record<
-    string,
-    Collection<unknown>
-  > = {};
+  @state() private _collections: Record<string, Collection<unknown>> = {};
 
-  @internalProperty() private _language = "en";
+  @state() private _language = "en";
 
   public connectedCallback(): void {
     super.connectedCallback();

hassio/src/system/hassio-core-info.ts

@@ -2,10 +2,10 @@ import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -39,7 +39,7 @@ class HassioCoreInfo extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _metrics?: HassioStats;
+  @state() private _metrics?: HassioStats;
 
   protected render(): TemplateResult | void {
     const metrics = [
@@ -189,7 +189,7 @@ class HassioCoreInfo extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/system/hassio-host-info.ts

@@ -5,7 +5,7 @@ import { mdiDotsVertical } from "@mdi/js";
 import { safeDump } from "js-yaml";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -415,7 +415,7 @@ class HassioHostInfo extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/system/hassio-supervisor-info.ts

@@ -1,9 +1,9 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -67,7 +67,7 @@ class HassioSupervisorInfo extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _metrics?: HassioStats;
+  @state() private _metrics?: HassioStats;
 
   protected render(): TemplateResult | void {
     const metrics = [
@@ -504,7 +504,7 @@ class HassioSupervisorInfo extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/system/hassio-supervisor-log.ts

@@ -4,10 +4,10 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -61,11 +61,11 @@ class HassioSupervisorLog extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _selectedLogProvider = "supervisor";
+  @state() private _selectedLogProvider = "supervisor";
 
-  @internalProperty() private _content?: string;
+  @state() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();
@@ -146,7 +146,7 @@ class HassioSupervisorLog extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

hassio/src/system/hassio-system.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -64,7 +64,7 @@ class HassioSystem extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

package.json

@@ -115,8 +115,8 @@
     "js-yaml": "^3.13.1",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit-element": "^2.5.0",
-    "lit-html": "^1.4.0",
+    "lit-element": "2.5.1",
+    "lit-html": "1.4.1",
     "lit-virtualizer": "^0.4.2",
     "marked": "2.0.0",
     "mdn-polyfills": "^5.16.0",
@@ -241,8 +241,8 @@
   "resolutions": {
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "@polymer/polymer": "3.1.0",
-    "lit-html": "1.4.0",
-    "lit-element": "2.5.0"
+    "lit-html": "1.4.1",
+    "lit-element": "2.5.1"
   },
   "main": "src/home-assistant.js",
   "husky": {

src/auth/ha-auth-flow.ts

@@ -1,9 +1,9 @@
 import "@material/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -29,13 +29,13 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
 
   @property() public oauth2State?: string;
 
-  @internalProperty() private _state: State = "loading";
+  @state() private _state: State = "loading";
 
-  @internalProperty() private _stepData: any = {};
+  @state() private _stepData: any = {};
 
-  @internalProperty() private _step?: DataEntryFlowStep;
+  @state() private _step?: DataEntryFlowStep;
 
-  @internalProperty() private _errorMessage?: string;
+  @state() private _errorMessage?: string;
 
   protected render() {
     return html` <form>${this._renderForm()}</form> `;
@@ -313,7 +313,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         /* So we can set min-height to avoid jumping during loading */

src/auth/ha-authorize.ts

@@ -1,8 +1,8 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -32,11 +32,11 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
   @property() public oauth2State?: string;
 
-  @internalProperty() private _authProvider?: AuthProvider;
+  @state() private _authProvider?: AuthProvider;
 
-  @internalProperty() private _authProviders?: AuthProvider[];
+  @state() private _authProviders?: AuthProvider[];
 
-  @internalProperty() private _discovery?: DiscoveryInformation;
+  @state() private _discovery?: DiscoveryInformation;
 
   constructor() {
     super();
@@ -189,7 +189,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     this._authProvider = ev.detail;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-pick-auth-provider {
         display: block;

src/common/decorators/local-storage.ts

@@ -1,5 +1,5 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { PropertyDeclaration, UpdatingElement } from "lit-element";
+import { PropertyDeclaration, ReactiveElement } from "lit-element";
 import type { ClassElement } from "../../types";
 
 type Callback = (oldValue: any, newValue: any) => void;
@@ -93,7 +93,7 @@ export const LocalStorage = (
 
   storage.addFromStorage(storageKey);
 
-  const subscribe = (el: UpdatingElement): UnsubscribeFunc =>
+  const subscribe = (el: ReactiveElement): UnsubscribeFunc =>
     storage.subscribeChanges(storageKey!, (oldValue) => {
       el.requestUpdate(clsElement.key, oldValue);
     });
@@ -101,7 +101,7 @@ export const LocalStorage = (
   const getValue = (): any =>
     storage.hasKey(storageKey!) ? storage.getValue(storageKey!) : initVal;
 
-  const setValue = (el: UpdatingElement, value: any) => {
+  const setValue = (el: ReactiveElement, value: any) => {
     let oldValue: unknown | undefined;
     if (property) {
       oldValue = getValue();
@@ -117,7 +117,7 @@ export const LocalStorage = (
     placement: "prototype",
     key: clsElement.key,
     descriptor: {
-      set(this: UpdatingElement, value: unknown) {
+      set(this: ReactiveElement, value: unknown) {
         setValue(this, value);
       },
       get() {
@@ -126,7 +126,7 @@ export const LocalStorage = (
       enumerable: true,
       configurable: true,
     },
-    finisher(cls: typeof UpdatingElement) {
+    finisher(cls: typeof ReactiveElement) {
       if (property) {
         const connectedCallback = cls.prototype.connectedCallback;
         const disconnectedCallback = cls.prototype.disconnectedCallback;

src/common/dom/dynamic-element-directive.ts

@@ -1,30 +1,47 @@
-import { directive, NodePart, Part } from "lit-html";
+import { noChange } from "lit-html";
+import {
+  ChildPart,
+  Directive,
+  directive,
+  DirectiveParameters,
+  PartInfo,
+  PartType,
+  // eslint-disable-next-line import/extensions
+} from "lit-html/directive.js";
 
 export const dynamicElement = directive(
-  (tag: string, properties?: Record<string, any>) => (part: Part): void => {
-    if (!(part instanceof NodePart)) {
-      throw new Error(
-        "dynamicElementDirective can only be used in content bindings"
-      );
+  class extends Directive {
+    private _element?: HTMLElement;
+
+    constructor(partInfo: PartInfo) {
+      super(partInfo);
+      if (partInfo.type !== PartType.CHILD) {
+        throw new Error(
+          "dynamicElementDirective can only be used in content bindings"
+        );
+      }
     }
 
-    let element = part.value as HTMLElement | undefined;
+    update(_part: ChildPart, [tag, properties]: DirectiveParameters<this>) {
+      if (this._element && this._element.localName === tag) {
+        if (properties) {
+          Object.entries(properties).forEach(([key, value]) => {
+            this._element![key] = value;
+          });
+        }
+        return noChange;
+      }
+      return this.render(tag, properties);
+    }
 
-    if (tag === element?.localName) {
+    render(tag: string, properties?: Record<string, any>): HTMLElement {
+      this._element = document.createElement(tag);
       if (properties) {
         Object.entries(properties).forEach(([key, value]) => {
-          element![key] = value;
+          this._element![key] = value;
         });
       }
-      return;
+      return this._element;
     }
-
-    element = document.createElement(tag);
-    if (properties) {
-      Object.entries(properties).forEach(([key, value]) => {
-        element![key] = value;
-      });
-    }
-    part.setValue(element);
   }
 );

src/common/search/search-input.ts

@@ -3,7 +3,7 @@ import { mdiClose, mdiMagnify } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   LitElement,
   property,
@@ -80,7 +80,7 @@ class SearchInput extends LitElement {
     this._filterChanged("");
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon,
       mwc-icon-button {

src/components/buttons/ha-call-api-button.ts

@@ -1,4 +1,11 @@
-import { css, CSSResult, html, LitElement, property, query } from "lit-element";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  property,
+  query,
+} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "./ha-progress-button";
@@ -59,7 +66,7 @@ class HaCallApiButton extends LitElement {
     fireEvent(this, "hass-api-called", eventData as any);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host([disabled]) {
         pointer-events: none;

src/components/buttons/ha-progress-button.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import type { Button } from "@material/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -60,7 +60,7 @@ class HaProgressButton extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         outline: none;

src/components/data-table/ha-data-table.ts

@@ -1,11 +1,11 @@
 import deepClone from "deep-clone-simple";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   eventOptions,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -118,21 +118,21 @@ export class HaDataTable extends LitElement {
 
   @property({ type: String }) public filter = "";
 
-  @internalProperty() private _filterable = false;
+  @state() private _filterable = false;
 
-  @internalProperty() private _filter = "";
+  @state() private _filter = "";
 
-  @internalProperty() private _sortColumn?: string;
+  @state() private _sortColumn?: string;
 
-  @internalProperty() private _sortDirection: SortingDirection = null;
+  @state() private _sortDirection: SortingDirection = null;
 
-  @internalProperty() private _filteredData: DataTableRowData[] = [];
+  @state() private _filteredData: DataTableRowData[] = [];
 
-  @internalProperty() private _headerHeight = 0;
+  @state() private _headerHeight = 0;
 
   @query("slot[name='header']") private _header!: HTMLSlotElement;
 
-  @internalProperty() private _items: DataTableRowData[] = [];
+  @state() private _items: DataTableRowData[] = [];
 
   private _checkableRowsCount?: number;
 
@@ -573,7 +573,7 @@ export class HaDataTable extends LitElement {
     this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       /* default mdc styles, colors changed, without checkbox styles */
       :host {

src/components/date-range-picker.ts

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import wrap from "@vue/web-component-wrapper";
-import { customElement } from "lit-element/lib/decorators";
 import Vue from "vue";
 import DateRangePicker from "vue2-daterange-picker";
 import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";

src/components/device/ha-area-devices-picker.ts

@@ -9,10 +9,10 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -127,13 +127,13 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
   @property({ type: Boolean })
   private _opened?: boolean;
 
-  @internalProperty() private _areaPicker = true;
+  @state() private _areaPicker = true;
 
-  @internalProperty() private _devices?: DeviceRegistryEntry[];
+  @state() private _devices?: DeviceRegistryEntry[];
 
-  @internalProperty() private _areas?: AreaRegistryEntry[];
+  @state() private _areas?: AreaRegistryEntry[];
 
-  @internalProperty() private _entities?: EntityRegistryEntry[];
+  @state() private _entities?: EntityRegistryEntry[];
 
   private _selectedDevices: string[] = [];
 
@@ -407,7 +407,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
     }, 0);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .suffix {
         display: flex;

src/components/device/ha-device-automation-picker.ts

@@ -4,9 +4,9 @@ import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -33,11 +33,11 @@ export abstract class HaDeviceAutomationPicker<
 
   @property() public value?: T;
 
-  @internalProperty() private _automations: T[] = [];
+  @state() private _automations: T[] = [];
 
   // Trigger an empty render so we start with a clean DOM.
   // paper-listbox does not like changing things around.
-  @internalProperty() private _renderEmpty = false;
+  @state() private _renderEmpty = false;
 
   protected get NO_AUTOMATION_TEXT() {
     return this.hass.localize(
@@ -188,7 +188,7 @@ export abstract class HaDeviceAutomationPicker<
     fireEvent(this, "value-changed", { value: automation });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-paper-dropdown-menu {
         width: 100%;

src/components/device/ha-device-picker.ts

@@ -3,10 +3,10 @@ import "@polymer/paper-item/paper-item-body";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -111,7 +111,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @internalProperty() private _opened?: boolean;
+  @state() private _opened?: boolean;
 
   @query("ha-combo-box", true) public comboBox!: HaComboBox;
 
@@ -326,7 +326,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     }, 0);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-input > mwc-icon-button {
         --mdc-icon-button-size: 24px;

src/components/entity/ha-entity-attribute-picker.ts

@@ -6,7 +6,7 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -165,7 +165,7 @@ class HaEntityAttributePicker extends LitElement {
     }, 0);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .suffix {
         display: flex;

src/components/entity/ha-entity-picker.ts

@@ -7,7 +7,7 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -311,7 +311,7 @@ export class HaEntityPicker extends LitElement {
     }, 0);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .suffix {
         display: flex;

src/components/entity/ha-entity-toggle.ts

@@ -1,9 +1,9 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -32,7 +32,7 @@ export class HaEntityToggle extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _isOn = false;
+  @state() private _isOn = false;
 
   protected render(): TemplateResult {
     if (!this.stateObj) {
@@ -148,7 +148,7 @@ export class HaEntityToggle extends LitElement {
     }, 2000);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         white-space: nowrap;

src/components/entity/ha-state-label-badge.ts

@@ -1,10 +1,10 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -35,7 +35,7 @@ export class HaStateLabelBadge extends LitElement {
 
   @property() public image?: string;
 
-  @internalProperty() private _timerTimeRemaining?: number;
+  @state() private _timerTimeRemaining?: number;
 
   private _connected?: boolean;
 
@@ -54,9 +54,9 @@ export class HaStateLabelBadge extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const state = this.state;
+    const entityState = this.state;
 
-    if (!state) {
+    if (!entityState) {
       return html`
         <ha-label-badge
           class="warning"
@@ -69,24 +69,31 @@ export class HaStateLabelBadge extends LitElement {
       `;
     }
 
-    const domain = computeStateDomain(state);
+    const domain = computeStateDomain(entityState);
 
     return html`
       <ha-label-badge
         class="${classMap({
           [domain]: true,
-          "has-unit_of_measurement": "unit_of_measurement" in state.attributes,
+          "has-unit_of_measurement":
+            "unit_of_measurement" in entityState.attributes,
         })}"
-        .value="${this._computeValue(domain, state)}"
-        .icon="${this.icon ? this.icon : this._computeIcon(domain, state)}"
+        .value="${this._computeValue(domain, entityState)}"
+        .icon="${this.icon
+          ? this.icon
+          : this._computeIcon(domain, entityState)}"
         .image="${this.icon
           ? ""
           : this.image
           ? this.image
-          : state.attributes.entity_picture_local ||
-            state.attributes.entity_picture}"
-        .label="${this._computeLabel(domain, state, this._timerTimeRemaining)}"
-        .description="${this.name ? this.name : computeStateName(state)}"
+          : entityState.attributes.entity_picture_local ||
+            entityState.attributes.entity_picture}"
+        .label="${this._computeLabel(
+          domain,
+          entityState,
+          this._timerTimeRemaining
+        )}"
+        .description="${this.name ? this.name : computeStateName(entityState)}"
       ></ha-label-badge>
     `;
   }
@@ -99,7 +106,7 @@ export class HaStateLabelBadge extends LitElement {
     }
   }
 
-  private _computeValue(domain: string, state: HassEntity) {
+  private _computeValue(domain: string, entityState: HassEntity) {
     switch (domain) {
       case "binary_sensor":
       case "device_tracker":
@@ -111,77 +118,81 @@ export class HaStateLabelBadge extends LitElement {
         return null;
       case "sensor":
       default:
-        return state.attributes.device_class === "moon__phase"
+        return entityState.attributes.device_class === "moon__phase"
           ? null
-          : state.state === UNKNOWN
+          : entityState.state === UNKNOWN
           ? "-"
-          : state.attributes.unit_of_measurement
-          ? formatNumber(state.state, this.hass!.locale)
-          : computeStateDisplay(this.hass!.localize, state, this.hass!.locale);
+          : entityState.attributes.unit_of_measurement
+          ? formatNumber(entityState.state, this.hass!.locale)
+          : computeStateDisplay(
+              this.hass!.localize,
+              entityState,
+              this.hass!.locale
+            );
     }
   }
 
-  private _computeIcon(domain: string, state: HassEntity) {
-    if (state.state === UNAVAILABLE) {
+  private _computeIcon(domain: string, entityState: HassEntity) {
+    if (entityState.state === UNAVAILABLE) {
       return null;
     }
     switch (domain) {
       case "alarm_control_panel":
-        if (state.state === "pending") {
+        if (entityState.state === "pending") {
           return "hass:clock-fast";
         }
-        if (state.state === "armed_away") {
+        if (entityState.state === "armed_away") {
           return "hass:nature";
         }
-        if (state.state === "armed_home") {
+        if (entityState.state === "armed_home") {
           return "hass:home-variant";
         }
-        if (state.state === "armed_night") {
+        if (entityState.state === "armed_night") {
           return "hass:weather-night";
         }
-        if (state.state === "armed_custom_bypass") {
+        if (entityState.state === "armed_custom_bypass") {
           return "hass:shield-home";
         }
-        if (state.state === "triggered") {
+        if (entityState.state === "triggered") {
           return "hass:alert-circle";
         }
         // state == 'disarmed'
-        return domainIcon(domain, state);
+        return domainIcon(domain, entityState);
       case "binary_sensor":
       case "device_tracker":
       case "updater":
       case "person":
       case "sun":
-        return stateIcon(state);
+        return stateIcon(entityState);
       case "timer":
-        return state.state === "active"
+        return entityState.state === "active"
           ? "hass:timer-outline"
           : "hass:timer-off-outline";
       default:
-        return state?.attributes.device_class === "moon__phase"
-          ? stateIcon(state)
+        return entityState?.attributes.device_class === "moon__phase"
+          ? stateIcon(entityState)
           : null;
     }
   }
 
-  private _computeLabel(domain, state, _timerTimeRemaining) {
+  private _computeLabel(domain, entityState, _timerTimeRemaining) {
     if (
-      state.state === UNAVAILABLE ||
+      entityState.state === UNAVAILABLE ||
       ["device_tracker", "alarm_control_panel", "person"].includes(domain)
     ) {
       // Localize the state with a special state_badge namespace, which has variations of
       // the state translations that are truncated to fit within the badge label. Translations
       // are only added for device_tracker, alarm_control_panel and person.
       return (
-        this.hass!.localize(`state_badge.${domain}.${state.state}`) ||
-        this.hass!.localize(`state_badge.default.${state.state}`) ||
-        state.state
+        this.hass!.localize(`state_badge.${domain}.${entityState.state}`) ||
+        this.hass!.localize(`state_badge.default.${entityState.state}`) ||
+        entityState.state
       );
     }
     if (domain === "timer") {
       return secondsToDuration(_timerTimeRemaining);
     }
-    return state.attributes.unit_of_measurement || null;
+    return entityState.attributes.unit_of_measurement || null;
   }
 
   private clearInterval() {
@@ -209,7 +220,7 @@ export class HaStateLabelBadge extends LitElement {
     this._timerTimeRemaining = timerTimeRemaining(stateObj);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         cursor: pointer;

src/components/entity/state-badge.ts

@@ -1,9 +1,9 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -32,7 +32,7 @@ export class StateBadge extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "icon" })
   private _showIcon = true;
 
-  @internalProperty() private _iconStyle: { [name: string]: string } = {};
+  @state() private _iconStyle: { [name: string]: string } = {};
 
   protected render(): TemplateResult {
     const stateObj = this.stateObj;
@@ -128,7 +128,7 @@ export class StateBadge extends LitElement {
     Object.assign(this.style, hostStyle);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         position: relative;

src/components/entity/state-info.ts

@@ -2,7 +2,7 @@ import "@polymer/paper-tooltip/paper-tooltip";
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -89,7 +89,7 @@ class StateInfo extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         min-width: 120px;

src/components/ha-addon-picker.ts

@@ -1,7 +1,7 @@
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   query,
@@ -51,7 +51,7 @@ class HaAddonPicker extends LitElement {
 
   @property() public value = "";
 
-  @internalProperty() private _addons?: HassioAddonInfo[];
+  @state() private _addons?: HassioAddonInfo[];
 
   @property({ type: Boolean }) public disabled = false;
 

src/components/ha-analytics.ts

@@ -1,7 +1,7 @@
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -151,7 +151,7 @@ export class HaAnalytics extends LitElement {
     fireEvent(this, "analytics-preferences-changed", { preferences });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`

src/components/ha-area-picker.ts

@@ -8,10 +8,10 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -119,13 +119,13 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @internalProperty() private _areas?: AreaRegistryEntry[];
+  @state() private _areas?: AreaRegistryEntry[];
 
-  @internalProperty() private _devices?: DeviceRegistryEntry[];
+  @state() private _devices?: DeviceRegistryEntry[];
 
-  @internalProperty() private _entities?: EntityRegistryEntry[];
+  @state() private _entities?: EntityRegistryEntry[];
 
-  @internalProperty() private _opened?: boolean;
+  @state() private _opened?: boolean;
 
   @query("vaadin-combo-box-light", true) public comboBox!: HTMLElement;
 
@@ -457,7 +457,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
     }, 0);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-input > mwc-icon-button {
         --mdc-icon-button-size: 24px;

src/components/ha-attributes.ts

@@ -1,7 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -58,7 +58,7 @@ class HaAttributes extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`

src/components/ha-bar.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   LitElement,
   property,
@@ -40,7 +40,7 @@ export class HaBar extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       rect {
         height: 100%;

src/components/ha-blueprint-picker.ts

@@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -98,7 +98,7 @@ class HaBluePrintPicker extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-block;

src/components/ha-button-menu.ts

@@ -2,7 +2,7 @@ import "@material/mwc-menu";
 import type { Corner, Menu } from "@material/mwc-menu";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -53,7 +53,7 @@ export class HaButtonMenu extends LitElement {
     this._menu!.show();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-block;

src/components/ha-button-related-filter-menu.ts

@@ -3,10 +3,10 @@ import type { Corner } from "@material/mwc-menu";
 import { mdiFilterVariant } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -59,7 +59,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
   @property({ type: Array, attribute: "exclude-domains" })
   public excludeDomains?: string[];
 
-  @internalProperty() private _open = false;
+  @state() private _open = false;
 
   protected render(): TemplateResult {
     return html`
@@ -175,7 +175,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-block;

src/components/ha-button-toggle-group.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button/mwc-button";
 import "@material/mwc-icon-button/mwc-icon-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -56,7 +56,7 @@ export class HaButtonToggleGroup extends LitElement {
     fireEvent(this, "value-changed", { value: this.active });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       div {
         display: flex;

src/components/ha-camera-stream.ts

@@ -1,9 +1,9 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -39,9 +39,9 @@ class HaCameraStream extends LitElement {
 
   // We keep track if we should force MJPEG with a string
   // that way it automatically resets if we change entity.
-  @internalProperty() private _forceMJPEG?: string;
+  @state() private _forceMJPEG?: string;
 
-  @internalProperty() private _url?: string;
+  @state() private _url?: string;
 
   protected render(): TemplateResult {
     if (!this.stateObj) {
@@ -113,7 +113,7 @@ class HaCameraStream extends LitElement {
     fireEvent(this, "iron-resize");
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host,
       img {

src/components/ha-card.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -14,7 +14,7 @@ export class HaCard extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public outlined = false;
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         background: var(

src/components/ha-chip-set.ts

@@ -2,7 +2,7 @@
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -48,7 +48,7 @@ export class HaChipSet extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
 

src/components/ha-chip.ts

@@ -4,7 +4,7 @@ import { ripple } from "@material/mwc-ripple/ripple-directive";
 import "./ha-icon";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -44,7 +44,7 @@ export class HaChip extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
       .mdc-chip {

src/components/ha-climate-state.ts

@@ -1,7 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -126,7 +126,7 @@ class HaClimateState extends LitElement {
       : stateString;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;

src/components/ha-code-editor.ts

@@ -1,10 +1,12 @@
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
 import {
   customElement,
-  internalProperty,
+  state,
   property,
   PropertyValues,
-  UpdatingElement,
+  ReactiveElement,
+  css,
+  CSSResultGroup,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import { loadCodeMirror } from "../resources/codemirror.ondemand";
@@ -24,7 +26,7 @@ const saveKeyBinding: KeyBinding = {
 };
 
 @customElement("ha-code-editor")
-export class HaCodeEditor extends UpdatingElement {
+export class HaCodeEditor extends ReactiveElement {
   public codemirror?: EditorView;
 
   @property() public mode = "yaml";
@@ -35,7 +37,7 @@ export class HaCodeEditor extends UpdatingElement {
 
   @property() public error = false;
 
-  @internalProperty() private _value = "";
+  @state() private _value = "";
 
   private _loadedCodeMirror?: typeof import("../resources/codemirror");
 
@@ -60,6 +62,14 @@ export class HaCodeEditor extends UpdatingElement {
 
   public connectedCallback() {
     super.connectedCallback();
+    // Lit 2.0 will create the shadowRoot for us, and adopt the styles, check if it was created
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" }).innerHTML = `<style>
+      :host(.error-state) div.cm-wrap .cm-gutters {
+        border-color: var(--error-state-color, red);
+      }
+    </style>`;
+    }
     if (!this.codemirror) {
       return;
     }
@@ -116,14 +126,6 @@ export class HaCodeEditor extends UpdatingElement {
   private async _load(): Promise<void> {
     this._loadedCodeMirror = await loadCodeMirror();
 
-    const shadowRoot = this.attachShadow({ mode: "open" });
-
-    shadowRoot!.innerHTML = `<style>
-      :host(.error-state) div.cm-wrap .cm-gutters {
-        border-color: var(--error-state-color, red);
-      }
-    </style>`;
-
     this.codemirror = new this._loadedCodeMirror.EditorView({
       state: this._loadedCodeMirror.EditorState.create({
         doc: this._value,
@@ -155,8 +157,8 @@ export class HaCodeEditor extends UpdatingElement {
           ),
         ],
       }),
-      root: shadowRoot,
-      parent: shadowRoot,
+      root: this.shadowRoot!,
+      parent: this.shadowRoot!,
     });
   }
 
@@ -175,6 +177,15 @@ export class HaCodeEditor extends UpdatingElement {
     this._value = newValue;
     fireEvent(this, "value-changed", { value: this._value });
   }
+
+  // Only Lit 2.0 will use this
+  static get styles(): CSSResultGroup {
+    return css`
+      :host(.error-state) div.cm-wrap .cm-gutters {
+        border-color: var(--error-state-color, red);
+      }
+    `;
+  }
 }
 
 declare global {

src/components/ha-combo-box.ts

@@ -7,10 +7,10 @@ import "@polymer/paper-listbox/paper-listbox";
 import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   query,
@@ -70,7 +70,7 @@ export class HaComboBox extends LitElement {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @internalProperty() private _opened?: boolean;
+  @state() private _opened?: boolean;
 
   @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
 
@@ -167,7 +167,7 @@ export class HaComboBox extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-input > mwc-icon-button {
         --mdc-icon-button-size: 24px;

src/components/ha-cover-controls.ts

@@ -1,10 +1,10 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -23,7 +23,7 @@ class HaCoverControls extends LitElement {
 
   @property({ attribute: false }) public stateObj!: HassEntity;
 
-  @internalProperty() private _entityObj?: CoverEntity;
+  @state() private _entityObj?: CoverEntity;
 
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
@@ -114,7 +114,7 @@ class HaCoverControls extends LitElement {
     this._entityObj.stopCover();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .state {
         white-space: nowrap;

src/components/ha-cover-tilt-controls.ts

@@ -1,10 +1,10 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -22,7 +22,7 @@ class HaCoverTiltControls extends LitElement {
 
   @property({ attribute: false }) stateObj!: HassEntity;
 
-  @internalProperty() private _entityObj?: CoverEntity;
+  @state() private _entityObj?: CoverEntity;
 
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
@@ -101,7 +101,7 @@ class HaCoverTiltControls extends LitElement {
     this._entityObj.stopCoverTilt();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         white-space: nowrap;

src/components/ha-date-input.ts

@@ -1,7 +1,7 @@
 import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -134,7 +134,7 @@ export class HaDateInput extends LitElement {
     return true;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-input {
         width: 110px;

src/components/ha-date-range-picker.ts

@@ -6,7 +6,7 @@ import { mdiCalendar } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -146,7 +146,7 @@ export class HaDateRangePicker extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon {
         margin-right: 8px;

src/components/ha-dialog.ts

@@ -2,7 +2,7 @@ import "@material/mwc-dialog";
 import type { Dialog } from "@material/mwc-dialog";
 import { style } from "@material/mwc-dialog/mwc-dialog-css";
 import { mdiClose } from "@mdi/js";
-import { css, CSSResult, customElement, html } from "lit-element";
+import { css, CSSResultGroup, customElement, html } from "lit-element";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import type { Constructor, HomeAssistant } from "../types";
 import "./ha-icon-button";
@@ -31,7 +31,7 @@ export class HaDialog extends MwcDialog {
     return html`<slot name="heading"> ${super.renderHeading()} </slot>`;
   }
 
-  protected static get styles(): CSSResult[] {
+  protected static get styles(): CSSResultGroup {
     return [
       style,
       css`

src/components/ha-expansion-panel.ts

@@ -1,7 +1,7 @@
 import { mdiChevronDown } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -59,7 +59,7 @@ class HaExpansionPanel extends LitElement {
     fireEvent(this, "expanded-changed", { expanded: this.expanded });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

src/components/ha-file-upload.ts

@@ -6,7 +6,7 @@ import {
   css,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -39,7 +39,7 @@ export class HaFileUpload extends LitElement {
   @property({ type: Boolean, attribute: "auto-open-file-dialog" })
   private autoOpenFileDialog = false;
 
-  @internalProperty() private _drag = false;
+  @state() private _drag = false;
 
   @query("#input") private _input?: HTMLInputElement;
 

src/components/ha-form/ha-form-boolean.ts

@@ -2,7 +2,7 @@ import "@polymer/paper-checkbox/paper-checkbox";
 import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -49,7 +49,7 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-checkbox {
         display: block;

src/components/ha-form/ha-form-constant.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -28,7 +28,7 @@ export class HaFormConstant extends LitElement implements HaFormElement {
     return html`<span class="label">${this.label}</span>: ${this.schema.value}`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

src/components/ha-form/ha-form-integer.ts

@@ -4,7 +4,7 @@ import "@polymer/paper-slider/paper-slider";
 import type { PaperSliderElement } from "@polymer/paper-slider/paper-slider";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -107,7 +107,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .flex {
         display: flex;

src/components/ha-form/ha-form-multi_select.ts

@@ -6,10 +6,10 @@ import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-ripple/paper-ripple";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   query,
@@ -33,7 +33,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
 
   @property() public suffix!: string;
 
-  @internalProperty() private _init = false;
+  @state() private _init = false;
 
   @query("paper-menu-button", true) private _input?: HTMLElement;
 
@@ -140,7 +140,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
     );
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-menu-button {
         display: block;

src/components/ha-form/ha-form-select.ts

@@ -2,7 +2,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -74,7 +74,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-paper-dropdown-menu {
         display: block;

src/components/ha-form/ha-form-string.ts

@@ -3,10 +3,10 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   query,
@@ -31,7 +31,7 @@ export class HaFormString extends LitElement implements HaFormElement {
 
   @property() public suffix!: string;
 
-  @internalProperty() private _unmaskedPassword = false;
+  @state() private _unmaskedPassword = false;
 
   @query("paper-input") private _input?: HTMLElement;
 
@@ -104,7 +104,7 @@ export class HaFormString extends LitElement implements HaFormElement {
     return "text";
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       mwc-icon-button {
         --mdc-icon-button-size: 24px;

src/components/ha-form/ha-form.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -207,7 +207,7 @@ export class HaForm extends LitElement implements HaFormElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .error {
         color: var(--error-color);

src/components/ha-formfield.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-formfield";
 import type { Formfield } from "@material/mwc-formfield";
 import { style } from "@material/mwc-formfield/mwc-formfield-css";
-import { css, CSSResult, customElement } from "lit-element";
+import { css, CSSResultGroup, customElement } from "lit-element";
 import { Constructor } from "../types";
 
 const MwcFormfield = customElements.get(
@@ -10,7 +10,7 @@ const MwcFormfield = customElements.get(
 
 @customElement("ha-formfield")
 export class HaFormfield extends MwcFormfield {
-  protected static get styles(): CSSResult[] {
+  protected static get styles(): CSSResultGroup {
     return [
       style,
       css`

src/components/ha-gauge.ts

@@ -1,7 +1,7 @@
 import {
   css,
   customElement,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -34,9 +34,9 @@ export class Gauge extends LitElement {
 
   @property() public label = "";
 
-  @internalProperty() private _angle = 0;
+  @state() private _angle = 0;
 
-  @internalProperty() private _updated = false;
+  @state() private _updated = false;
 
   protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);

src/components/ha-hls-player.ts

@@ -1,10 +1,10 @@
 import type HlsType from "hls.js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -40,7 +40,7 @@ class HaHLSPlayer extends LitElement {
   // don't cache this, as we remove it on disconnects
   @query("video") private _videoEl!: HTMLVideoElement;
 
-  @internalProperty() private _attached = false;
+  @state() private _attached = false;
 
   private _hlsPolyfillInstance?: HlsType;
 
@@ -220,7 +220,7 @@ class HaHLSPlayer extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host,
       video {

src/components/ha-icon-button-arrow-next.ts

@@ -3,7 +3,7 @@ import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -19,7 +19,7 @@ export class HaIconButtonArrowNext extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _icon = mdiArrowRight;
+  @state() private _icon = mdiArrowRight;
 
   public connectedCallback() {
     super.connectedCallback();

src/components/ha-icon-button-arrow-prev.ts

@@ -3,7 +3,7 @@ import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -19,7 +19,7 @@ export class HaIconButtonArrowPrev extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _icon = mdiArrowLeft;
+  @state() private _icon = mdiArrowLeft;
 
   public connectedCallback() {
     super.connectedCallback();

src/components/ha-icon-button-next.ts

@@ -3,7 +3,7 @@ import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -19,7 +19,7 @@ export class HaIconButtonNext extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _icon = mdiChevronRight;
+  @state() private _icon = mdiChevronRight;
 
   public connectedCallback() {
     super.connectedCallback();

src/components/ha-icon-button-prev.ts

@@ -3,7 +3,7 @@ import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -19,7 +19,7 @@ export class HaIconButtonPrev extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _icon = mdiChevronLeft;
+  @state() private _icon = mdiChevronLeft;
 
   public connectedCallback() {
     super.connectedCallback();

src/components/ha-icon-button.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-icon-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -18,9 +18,10 @@ export class HaIconButton extends LitElement {
 
   @property({ type: String }) label = "";
 
-  protected createRenderRoot() {
-    return this.attachShadow({ mode: "open", delegatesFocus: true });
-  }
+  static shadowRootOptions: ShadowRootInit = {
+    mode: "open",
+    delegatesFocus: true,
+  };
 
   protected render(): TemplateResult {
     return html`
@@ -30,7 +31,7 @@ export class HaIconButton extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-block;

src/components/ha-icon.ts

@@ -1,10 +1,10 @@
 import "@polymer/iron-icon/iron-icon";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -45,11 +45,11 @@ const cachedIcons: Record<string, string> = {};
 export class HaIcon extends LitElement {
   @property() public icon?: string;
 
-  @internalProperty() private _path?: string;
+  @state() private _path?: string;
 
-  @internalProperty() private _viewBox?;
+  @state() private _viewBox?;
 
-  @internalProperty() private _legacy = false;
+  @state() private _legacy = false;
 
   protected updated(changedProps: PropertyValues) {
     if (changedProps.has("icon")) {
@@ -161,7 +161,7 @@ export class HaIcon extends LitElement {
     cachedIcons[iconName] = iconPack[iconName];
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         fill: currentcolor;

src/components/ha-label-badge.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
   LitElement,
   property,
@@ -60,7 +60,7 @@ class HaLabelBadge extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         .badge-container {

src/components/ha-markdown-element.ts

@@ -1,15 +1,22 @@
-import { customElement, property, UpdatingElement } from "lit-element";
+import { customElement, property, ReactiveElement } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import { renderMarkdown } from "../resources/render-markdown";
 
 @customElement("ha-markdown-element")
-class HaMarkdownElement extends UpdatingElement {
+class HaMarkdownElement extends ReactiveElement {
   @property() public content?;
 
   @property({ type: Boolean }) public allowSvg = false;
 
   @property({ type: Boolean }) public breaks = false;
 
+  public connectedCallback() {
+    super.connectedCallback();
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+  }
+
   protected update(changedProps) {
     super.update(changedProps);
     if (this.content !== undefined) {
@@ -18,7 +25,7 @@ class HaMarkdownElement extends UpdatingElement {
   }
 
   private async _render() {
-    this.innerHTML = await renderMarkdown(
+    this.shadowRoot!.innerHTML = await renderMarkdown(
       this.content,
       {
         breaks: this.breaks,
@@ -32,10 +39,8 @@ class HaMarkdownElement extends UpdatingElement {
     this._resize();
 
     const walker = document.createTreeWalker(
-      this,
-      1 /* SHOW_ELEMENT */,
-      null,
-      false
+      this.shadowRoot!,
+      1 /* SHOW_ELEMENT */
     );
 
     while (walker.nextNode()) {

src/components/ha-markdown.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -29,7 +29,7 @@ class HaMarkdown extends LitElement {
     ></ha-markdown-element>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

src/components/ha-menu-button.ts

@@ -3,10 +3,10 @@ import { mdiMenu } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -25,7 +25,7 @@ class HaMenuButton extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _hasNotifications = false;
+  @state() private _hasNotifications = false;
 
   private _alwaysVisible = false;
 
@@ -125,7 +125,7 @@ class HaMenuButton extends LitElement {
     fireEvent(this, "hass-toggle-menu");
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         position: relative;

src/components/ha-picture-upload.ts

@@ -5,7 +5,7 @@ import "@polymer/paper-input/paper-input-container";
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -36,7 +36,7 @@ export class HaPictureUpload extends LitElement {
 
   @property({ type: Number }) public size = 512;
 
-  @internalProperty() private _uploading = false;
+  @state() private _uploading = false;
 
   public render(): TemplateResult {
     return html`

src/components/ha-related-items.ts

@@ -1,10 +1,10 @@
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -34,13 +34,13 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
 
   @property() public itemId!: string;
 
-  @internalProperty() private _entries?: ConfigEntry[];
+  @state() private _entries?: ConfigEntry[];
 
-  @internalProperty() private _devices?: DeviceRegistryEntry[];
+  @state() private _devices?: DeviceRegistryEntry[];
 
-  @internalProperty() private _areas?: AreaRegistryEntry[];
+  @state() private _areas?: AreaRegistryEntry[];
 
-  @internalProperty() private _related?: RelatedResult;
+  @state() private _related?: RelatedResult;
 
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
@@ -303,7 +303,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
     fireEvent(this, "hass-more-info", { entityId });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       a {
         color: var(--primary-color);

src/components/ha-relative-time.ts

@@ -2,13 +2,13 @@ import {
   customElement,
   property,
   PropertyValues,
-  UpdatingElement,
+  ReactiveElement,
 } from "lit-element";
 import relativeTime from "../common/datetime/relative_time";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-relative-time")
-class HaRelativeTime extends UpdatingElement {
+class HaRelativeTime extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public datetime?: string | Date;
@@ -27,6 +27,10 @@ class HaRelativeTime extends UpdatingElement {
     }
   }
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this._updateRelative();

src/components/ha-selector/ha-selector-action.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -31,7 +31,7 @@ export class HaActionSelector extends LitElement {
     ></ha-automation-action>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-automation-action {
         display: block;

src/components/ha-selector/ha-selector-area.ts

@@ -1,10 +1,4 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { customElement, html, state, LitElement, property } from "lit-element";
 import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import { DeviceRegistryEntry } from "../../data/device_registry";
 import { EntityRegistryEntry } from "../../data/entity_registry";
@@ -22,7 +16,7 @@ export class HaAreaSelector extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() public _configEntries?: ConfigEntry[];
+  @state() public _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
 

src/components/ha-selector/ha-selector-boolean.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -39,7 +39,7 @@ export class HaBooleanSelector extends LitElement {
     fireEvent(this, "value-changed", { value });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-formfield {
         width: 100%;

src/components/ha-selector/ha-selector-device.ts

@@ -1,10 +1,4 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { customElement, html, state, LitElement, property } from "lit-element";
 import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import { DeviceRegistryEntry } from "../../data/device_registry";
 import { DeviceSelector } from "../../data/selector";
@@ -21,7 +15,7 @@ export class HaDeviceSelector extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() public _configEntries?: ConfigEntry[];
+  @state() public _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
 

src/components/ha-selector/ha-selector-entity.ts

@@ -1,11 +1,5 @@
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { customElement, html, state, LitElement, property } from "lit-element";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { subscribeEntityRegistry } from "../../data/entity_registry";
 import { EntitySelector } from "../../data/selector";
@@ -19,7 +13,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
 
   @property() public selector!: EntitySelector;
 
-  @internalProperty() private _entityPlaformLookup?: Record<string, string>;
+  @state() private _entityPlaformLookup?: Record<string, string>;
 
   @property() public value?: any;
 

src/components/ha-selector/ha-selector-number.ts

@@ -1,7 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -92,7 +92,7 @@ export class HaNumberSelector extends LitElement {
     fireEvent(this, "value-changed", { value });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;

src/components/ha-selector/ha-selector-select.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -52,7 +52,7 @@ export class HaSelectSelector extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-paper-dropdown-menu {
         width: 100%;

src/components/ha-selector/ha-selector-target.ts

@@ -10,10 +10,10 @@ import {
 } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
 } from "lit-element";
@@ -38,9 +38,9 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
 
   @property() public label?: string;
 
-  @internalProperty() private _entityPlaformLookup?: Record<string, string>;
+  @state() private _entityPlaformLookup?: Record<string, string>;
 
-  @internalProperty() private _configEntries?: ConfigEntry[];
+  @state() private _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -153,7 +153,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
     );
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-target-picker {
         display: block;

src/components/ha-service-control.ts

@@ -6,10 +6,10 @@ import {
 } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -55,13 +55,13 @@ export class HaServiceControl extends LitElement {
     data?: Record<string, any>;
   };
 
-  @internalProperty() private _value!: this["value"];
+  @state() private _value!: this["value"];
 
   @property({ reflect: true, type: Boolean }) public narrow!: boolean;
 
   @property({ type: Boolean }) public showAdvanced?: boolean;
 
-  @internalProperty() private _checkedKeys = new Set();
+  @state() private _checkedKeys = new Set();
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
@@ -407,7 +407,7 @@ export class HaServiceControl extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-settings-row {
         padding: var(--service-control-padding, 0 16px);

src/components/ha-service-picker.ts

@@ -1,4 +1,4 @@
-import { html, internalProperty, LitElement, property } from "lit-element";
+import { html, state, LitElement, property } from "lit-element";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { LocalizeFunc } from "../common/translations/localize";
@@ -38,7 +38,7 @@ class HaServicePicker extends LitElement {
 
   @property() public value?: string;
 
-  @internalProperty() private _filter?: string;
+  @state() private _filter?: string;
 
   protected render() {
     return html`

src/components/ha-settings-row.ts

@@ -1,7 +1,7 @@
 import "@polymer/paper-item/paper-item-body";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -32,7 +32,7 @@ export class HaSettingsRow extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;

src/components/ha-sidebar.ts

@@ -15,14 +15,15 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   eventOptions,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
+  CSSResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { guard } from "lit-html/directives/guard";
@@ -171,15 +172,15 @@ class HaSidebar extends LitElement {
 
   @property({ type: Boolean }) public editMode = false;
 
-  @internalProperty() private _externalConfig?: ExternalConfig;
+  @state() private _externalConfig?: ExternalConfig;
 
-  @internalProperty() private _notifications?: PersistentNotification[];
+  @state() private _notifications?: PersistentNotification[];
 
   // property used only in css
   // @ts-ignore
   @property({ type: Boolean, reflect: true }) public rtl = false;
 
-  @internalProperty() private _renderEmptySortable = false;
+  @state() private _renderEmptySortable = false;
 
   private _mouseLeaveTimeout?: number;
 
@@ -524,7 +525,7 @@ class HaSidebar extends LitElement {
       ]);
 
       const style = document.createElement("style");
-      style.innerHTML = sortStylesImport.sortableStyles.cssText;
+      style.innerHTML = (sortStylesImport.sortableStyles as CSSResult).cssText;
       this.shadowRoot!.appendChild(style);
 
       Sortable = sortableImport.Sortable;
@@ -741,7 +742,7 @@ class HaSidebar extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
       css`

src/components/ha-svg-icon.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   LitElement,
   property,
@@ -26,7 +26,7 @@ export class HaSvgIcon extends LitElement {
     </svg>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: var(--ha-icon-display, inline-flex);

src/components/ha-switch.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-switch";
 import type { Switch } from "@material/mwc-switch";
 import { style } from "@material/mwc-switch/mwc-switch-css";
-import { css, CSSResult, customElement, property } from "lit-element";
+import { css, CSSResultGroup, customElement, property } from "lit-element";
 import { forwardHaptic } from "../data/haptics";
 import { Constructor } from "../types";
 
@@ -27,7 +27,7 @@ export class HaSwitch extends MwcSwitch {
     });
   }
 
-  protected static get styles(): CSSResult[] {
+  protected static get styles(): CSSResultGroup {
     return [
       style,
       css`

src/components/ha-tab.ts

@@ -3,11 +3,11 @@ import "@material/mwc-ripple/mwc-ripple";
 import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   eventOptions,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   queryAsync,
@@ -27,7 +27,7 @@ export class HaTab extends LitElement {
 
   @queryAsync("mwc-ripple") private _ripple!: Promise<Ripple | null>;
 
-  @internalProperty() private _shouldRenderRipple = false;
+  @state() private _shouldRenderRipple = false;
 
   protected render(): TemplateResult {
     return html`
@@ -92,7 +92,7 @@ export class HaTab extends LitElement {
     this._rippleHandlers.endFocus();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       div {
         padding: 0 32px;

src/components/ha-target-picker.ts

@@ -16,10 +16,10 @@ import {
 } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   query,
@@ -86,15 +86,15 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  @internalProperty() private _areas?: { [areaId: string]: AreaRegistryEntry };
+  @state() private _areas?: { [areaId: string]: AreaRegistryEntry };
 
-  @internalProperty() private _devices?: {
+  @state() private _devices?: {
     [deviceId: string]: DeviceRegistryEntry;
   };
 
-  @internalProperty() private _entities?: EntityRegistryEntry[];
+  @state() private _entities?: EntityRegistryEntry[];
 
-  @internalProperty() private _addMode?: "area_id" | "entity_id" | "device_id";
+  @state() private _addMode?: "area_id" | "entity_id" | "device_id";
 
   @query("#input") private _inputElement?;
 
@@ -534,7 +534,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     return true;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
       .mdc-chip {

src/components/ha-yaml-editor.ts

@@ -2,7 +2,7 @@ import { safeDump, safeLoad } from "js-yaml";
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -32,7 +32,7 @@ export class HaYamlEditor extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _yaml = "";
+  @state() private _yaml = "";
 
   public setValue(value): void {
     try {

src/components/map/ha-location-editor.ts

@@ -10,7 +10,7 @@ import {
 } from "leaflet";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -271,7 +271,7 @@ class LocationEditor extends LitElement {
     (this._locationMarker as Circle).setStyle({ color: this.radiusColor });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

src/components/map/ha-locations-editor.ts

@@ -10,7 +10,7 @@ import {
 } from "leaflet";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -303,7 +303,7 @@ export class HaLocationsEditor extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

src/components/map/ha-map.ts

@@ -1,7 +1,7 @@
 import { Circle, Layer, Map, Marker, TileLayer } from "leaflet";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -326,7 +326,7 @@ class HaMap extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

src/components/media-player/dialog-media-player-browse.ts

@@ -1,9 +1,9 @@
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -23,15 +23,15 @@ import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog";
 class DialogMediaPlayerBrowse extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _entityId!: string;
+  @state() private _entityId!: string;
 
-  @internalProperty() private _mediaContentId?: string;
+  @state() private _mediaContentId?: string;
 
-  @internalProperty() private _mediaContentType?: string;
+  @state() private _mediaContentType?: string;
 
-  @internalProperty() private _action?: MediaPlayerBrowseAction;
+  @state() private _action?: MediaPlayerBrowseAction;
 
-  @internalProperty() private _params?: MediaPlayerBrowseDialogParams;
+  @state() private _params?: MediaPlayerBrowseDialogParams;
 
   public showDialog(params: MediaPlayerBrowseDialogParams): void {
     this._params = params;
@@ -81,7 +81,7 @@ class DialogMediaPlayerBrowse extends LitElement {
     }
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`

src/components/media-player/ha-media-player-browse.ts

@@ -7,11 +7,11 @@ import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   customElement,
   eventOptions,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -72,11 +72,11 @@ export class HaMediaPlayerBrowse extends LitElement {
   @property({ type: Boolean, attribute: "scroll", reflect: true })
   private _scrolled = false;
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
-  @internalProperty() private _error?: { message: string; code: string };
+  @state() private _error?: { message: string; code: string };
 
-  @internalProperty() private _mediaPlayerItems: MediaPlayerItem[] = [];
+  @state() private _mediaPlayerItems: MediaPlayerItem[] = [];
 
   @query(".header") private _header?: HTMLDivElement;
 
@@ -610,7 +610,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     return html`<span class="error">${err.message}</span>`;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`

src/components/state-history-charts.ts

@@ -1,7 +1,7 @@
 import "./ha-circular-progress";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -98,7 +98,7 @@ class StateHistoryCharts extends LitElement {
     return !this.isLoadingData && historyDataEmpty;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

src/components/trace/ha-timeline.ts

@@ -6,7 +6,7 @@ import {
   css,
   property,
   TemplateResult,
-  internalProperty,
+  state,
 } from "lit-element";
 import { buttonLinkStyle } from "../../resources/styles";
 import "../ha-svg-icon";
@@ -23,7 +23,7 @@ export class HaTimeline extends LitElement {
 
   @property({ attribute: false }) public moreItems?: TemplateResult[];
 
-  @internalProperty() private _showMore = false;
+  @state() private _showMore = false;
 
   protected render() {
     return html`

src/components/trace/hat-trace-timeline.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -568,7 +568,7 @@ export class HaAutomationTracer extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         ha-timeline[lastItem].condition {

src/components/user/ha-person-badge.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -37,7 +37,7 @@ class PersonBadge extends LitElement {
     </div>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: contents;

src/components/user/ha-user-badge.ts

@@ -1,9 +1,9 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -36,7 +36,7 @@ class UserBadge extends LitElement {
 
   @property({ attribute: false }) public user?: User | CurrentUser;
 
-  @internalProperty() private _personPicture?: string;
+  @state() private _personPicture?: string;
 
   private _personEntityId?: string;
 
@@ -53,9 +53,9 @@ class UserBadge extends LitElement {
       this.hass.states[this._personEntityId] !==
         oldHass.states[this._personEntityId]
     ) {
-      const state = this.hass.states[this._personEntityId];
-      if (state) {
-        this._personPicture = state.attributes.entity_picture;
+      const entityState = this.hass.states[this._personEntityId];
+      if (entityState) {
+        this._personPicture = entityState.attributes.entity_picture;
       } else {
         this._getPersonPicture();
       }
@@ -102,7 +102,7 @@ class UserBadge extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: contents;

src/components/user/ha-user-picker.ts

@@ -5,7 +5,7 @@ import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
   LitElement,
   property,
@@ -96,7 +96,7 @@ class HaUserPicker extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-block;

src/components/user/ha-users-picker.ts

@@ -1,7 +1,7 @@
 import { mdiClose } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -149,7 +149,7 @@ class HaUsersPickerLight extends LitElement {
     this._updateUsers(this._currentUsers.filter((user) => user !== userId));
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -1,10 +1,10 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -28,15 +28,15 @@ import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry
 class DialogConfigEntrySystemOptions extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _disableNewEntities!: boolean;
+  @state() private _disableNewEntities!: boolean;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _params?: ConfigEntrySystemOptionsDialogParams;
+  @state() private _params?: ConfigEntrySystemOptionsDialogParams;
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
-  @internalProperty() private _submitting = false;
+  @state() private _submitting = false;
 
   public async showDialog(
     params: ConfigEntrySystemOptionsDialogParams
@@ -154,7 +154,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -3,10 +3,10 @@ import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   PropertyValues,
   TemplateResult,
@@ -61,27 +61,27 @@ declare global {
 class DataEntryFlowDialog extends LitElement {
   public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: DataEntryFlowDialogParams;
+  @state() private _params?: DataEntryFlowDialogParams;
 
-  @internalProperty() private _loading = true;
+  @state() private _loading = true;
 
   private _instance = instance;
 
-  @internalProperty() private _step:
+  @state() private _step:
     | DataEntryFlowStep
     | undefined
     // Null means we need to pick a config flow
     | null;
 
-  @internalProperty() private _devices?: DeviceRegistryEntry[];
+  @state() private _devices?: DeviceRegistryEntry[];
 
-  @internalProperty() private _areas?: AreaRegistryEntry[];
+  @state() private _areas?: AreaRegistryEntry[];
 
-  @internalProperty() private _handlers?: string[];
+  @state() private _handlers?: string[];
 
-  @internalProperty() private _handler?: string;
+  @state() private _handler?: string;
 
-  @internalProperty() private _flowsInProgress?: DataEntryFlowProgress[];
+  @state() private _flowsInProgress?: DataEntryFlowProgress[];
 
   private _unsubAreas?: UnsubscribeFunc;
 
@@ -400,7 +400,7 @@ class DataEntryFlowDialog extends LitElement {
     this._step = step;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`

src/dialogs/config-flow/step-flow-abort.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import {
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -47,7 +47,7 @@ class StepFlowAbort extends LitElement {
     fireEvent(this, "flow-update", { step: undefined });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configFlowContentStyles;
   }
 }

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -4,7 +4,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -109,7 +109,7 @@ class StepFlowCreateEntry extends LitElement {
     }
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`

src/dialogs/config-flow/step-flow-external.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -48,7 +48,7 @@ class StepFlowExternal extends LitElement {
     window.open(this.step.url);
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`

src/dialogs/config-flow/step-flow-form.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -183,7 +183,7 @@ class StepFlowForm extends LitElement {
   private _errorCallback = (error: string) =>
     this.flowConfig.renderShowFormStepFieldError(this.hass, this.step, error);
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`

src/dialogs/config-flow/step-flow-loading.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -22,7 +22,7 @@ class StepFlowLoading extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .init-spinner {
         padding: 50px 100px;

src/dialogs/config-flow/step-flow-pick-flow.ts

@@ -3,7 +3,7 @@ import "@polymer/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -89,7 +89,7 @@ class StepFlowPickFlow extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -3,10 +3,10 @@ import "@polymer/paper-item/paper-item-body";
 import Fuse from "fuse.js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -46,7 +46,7 @@ class StepFlowPickHandler extends LitElement {
 
   @property() public showAdvanced?: boolean;
 
-  @internalProperty() private _filter?: string;
+  @state() private _filter?: string;
 
   private _width?: number;
 
@@ -175,7 +175,7 @@ class StepFlowPickHandler extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`

src/dialogs/config-flow/step-flow-progress.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -39,7 +39,7 @@ class StepFlowProgress extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`

src/dialogs/domain-toggler/dialog-domain-toggler.ts

@@ -1,10 +1,10 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   TemplateResult,
 } from "lit-element";
@@ -24,7 +24,7 @@ class DomainTogglerDialog
   implements HassDialog<HaDomainTogglerDialogParams> {
   public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: HaDomainTogglerDialogParams;
+  @state() private _params?: HaDomainTogglerDialogParams;
 
   public showDialog(params: HaDomainTogglerDialogParams): void {
     this._params = params;
@@ -91,7 +91,7 @@ class DomainTogglerDialog
     ev.currentTarget.blur();
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`

src/dialogs/generic/dialog-box.ts

@@ -2,10 +2,10 @@ import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -23,9 +23,9 @@ import { DialogBoxParams } from "./show-dialog-box";
 class DialogBox extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: DialogBoxParams;
+  @state() private _params?: DialogBoxParams;
 
-  @internalProperty() private _value?: string;
+  @state() private _value?: string;
 
   public async showDialog(params: DialogBoxParams): Promise<void> {
     this._params = params;
@@ -154,7 +154,7 @@ class DialogBox extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`

src/dialogs/image-cropper-dialog/image-cropper-dialog.ts

@@ -4,10 +4,10 @@ import Cropper from "cropperjs";
 import cropperCss from "cropperjs/dist/cropper.css";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -25,9 +25,9 @@ import { HaImageCropperDialogParams } from "./show-image-cropper-dialog";
 export class HaImagecropperDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: HaImageCropperDialogParams;
+  @state() private _params?: HaImageCropperDialogParams;
 
-  @internalProperty() private _open = false;
+  @state() private _open = false;
 
   @query("img", true) private _image!: HTMLImageElement;
 
@@ -104,7 +104,7 @@ export class HaImagecropperDialog extends LitElement {
     );
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`

src/dialogs/more-info/controls/more-info-automation.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -50,7 +50,7 @@ class MoreInfoAutomation extends LitElement {
     triggerAutomationActions(this.hass, this.stateObj!.entity_id);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .flex {
         display: flex;

src/dialogs/more-info/controls/more-info-camera.ts

@@ -2,9 +2,9 @@ import "@polymer/paper-checkbox/paper-checkbox";
 import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -27,9 +27,9 @@ class MoreInfoCamera extends LitElement {
 
   @property() public stateObj?: CameraEntity;
 
-  @internalProperty() private _cameraPrefs?: CameraPreferences;
+  @state() private _cameraPrefs?: CameraPreferences;
 
-  @internalProperty() private _attached = false;
+  @state() private _attached = false;
 
   public connectedCallback() {
     super.connectedCallback();
@@ -113,7 +113,7 @@ class MoreInfoCamera extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

src/dialogs/more-info/controls/more-info-climate.ts

@@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
   LitElement,
   property,
@@ -437,7 +437,7 @@ class MoreInfoClimate extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         color: var(--primary-text-color);

src/dialogs/more-info/controls/more-info-counter.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -59,7 +59,7 @@ class MoreInfoCounter extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .actions {
         margin: 8px 0;

src/dialogs/more-info/controls/more-info-group.ts

@@ -1,8 +1,8 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  internalProperty,
+  CSSResultGroup,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -23,9 +23,9 @@ class MoreInfoGroup extends LitElement {
 
   @property() public stateObj?: GroupEntity;
 
-  @internalProperty() private _groupDomainStateObj?: HassEntity;
+  @state() private _groupDomainStateObj?: HassEntity;
 
-  @internalProperty() private _moreInfoType?: string;
+  @state() private _moreInfoType?: string;
 
   protected updated(changedProperties: PropertyValues) {
     if (
@@ -38,7 +38,7 @@ class MoreInfoGroup extends LitElement {
 
     const states = this.stateObj.attributes.entity_id
       .map((entity_id) => this.hass.states[entity_id])
-      .filter((state) => state);
+      .filter((entityState) => entityState);
 
     if (!states.length) {
       this._groupDomainStateObj = undefined;
@@ -53,7 +53,9 @@ class MoreInfoGroup extends LitElement {
     // first child above the children of the current group
     if (
       groupDomain !== "group" &&
-      states.every((state) => groupDomain === computeStateDomain(state))
+      states.every(
+        (entityState) => groupDomain === computeStateDomain(entityState)
+      )
     ) {
       this._groupDomainStateObj = {
         ...baseStateObj,
@@ -80,20 +82,20 @@ class MoreInfoGroup extends LitElement {
         })
       : ""}
     ${this.stateObj.attributes.entity_id.map((entity_id) => {
-      const state = this.hass!.states[entity_id];
-      if (!state) {
+      const entityState = this.hass!.states[entity_id];
+      if (!entityState) {
         return "";
       }
       return html`
         <state-card-content
-          .stateObj=${state}
+          .stateObj=${entityState}
           .hass=${this.hass}
         ></state-card-content>
       `;
     })}`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       state-card-content {
         display: block;

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
   LitElement,
   property,
@@ -171,7 +171,7 @@ class MoreInfoHumidifier extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         color: var(--primary-text-color);

src/dialogs/more-info/controls/more-info-light.ts

@@ -2,10 +2,10 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -41,27 +41,27 @@ class MoreInfoLight extends LitElement {
 
   @property({ attribute: false }) public stateObj?: LightEntity;
 
-  @internalProperty() private _brightnessSliderValue = 0;
+  @state() private _brightnessSliderValue = 0;
 
-  @internalProperty() private _ctSliderValue?: number;
+  @state() private _ctSliderValue?: number;
 
-  @internalProperty() private _cwSliderValue?: number;
+  @state() private _cwSliderValue?: number;
 
-  @internalProperty() private _wwSliderValue?: number;
+  @state() private _wwSliderValue?: number;
 
-  @internalProperty() private _wvSliderValue?: number;
+  @state() private _wvSliderValue?: number;
 
-  @internalProperty() private _colorBrightnessSliderValue?: number;
+  @state() private _colorBrightnessSliderValue?: number;
 
-  @internalProperty() private _brightnessAdjusted?: number;
+  @state() private _brightnessAdjusted?: number;
 
-  @internalProperty() private _hueSegments = 24;
+  @state() private _hueSegments = 24;
 
-  @internalProperty() private _saturationSegments = 8;
+  @state() private _saturationSegments = 8;
 
-  @internalProperty() private _colorPickerColor?: [number, number, number];
+  @state() private _colorPickerColor?: [number, number, number];
 
-  @internalProperty() private _mode?: "color" | LightColorModes.COLOR_TEMP;
+  @state() private _mode?: "color" | LightColorModes.COLOR_TEMP;
 
   protected render(): TemplateResult {
     if (!this.hass || !this.stateObj) {
@@ -539,7 +539,7 @@ class MoreInfoLight extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .content {
         display: flex;

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -6,7 +6,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -203,7 +203,7 @@ class MoreInfoMediaPlayer extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-icon-button[action="turn_off"],
       ha-icon-button[action="turn_on"],

src/dialogs/more-info/controls/more-info-person.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -68,7 +68,7 @@ class MoreInfoPerson extends LitElement {
     fireEvent(this, "hass-more-info", { entityId: null });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .flex {
         display: flex;

src/dialogs/more-info/controls/more-info-remote.ts

@@ -2,7 +2,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -75,7 +75,7 @@ class MoreInfoRemote extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-item {
         cursor: pointer;

src/dialogs/more-info/controls/more-info-script.ts

@@ -1,7 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -42,7 +42,7 @@ class MoreInfoScript extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .flex {
         display: flex;

src/dialogs/more-info/controls/more-info-sun.ts

@@ -1,7 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -68,7 +68,7 @@ class MoreInfoSun extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .row {
         margin: 0;

src/dialogs/more-info/controls/more-info-timer.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -73,7 +73,7 @@ class MoreInfoTimer extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .actions {
         margin: 8px 0;

src/dialogs/more-info/controls/more-info-vacuum.ts

@@ -2,7 +2,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -224,7 +224,7 @@ class MoreInfoVacuum extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         line-height: 1.5;

src/dialogs/more-info/controls/more-info-weather.ts

@@ -22,7 +22,7 @@ import {
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   LitElement,
   property,
@@ -224,7 +224,7 @@ class MoreInfoWeather extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon {
         color: var(--paper-item-icon-color);

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -7,7 +7,7 @@ import {
   css,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
 } from "lit-element";
@@ -58,9 +58,9 @@ export class MoreInfoDialog extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public large = false;
 
-  @internalProperty() private _entityId?: string | null;
+  @state() private _entityId?: string | null;
 
-  @internalProperty() private _currTabIndex = 0;
+  @state() private _currTabIndex = 0;
 
   public showDialog(params: MoreInfoDialogParams) {
     this._entityId = params.entityId;

src/dialogs/more-info/ha-more-info-history.ts

@@ -1,7 +1,7 @@
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -20,7 +20,7 @@ export class MoreInfoHistory extends LitElement {
 
   @property() public entityId!: string;
 
-  @internalProperty() private _stateHistory?: HistoryResult;
+  @state() private _stateHistory?: HistoryResult;
 
   private _throttleGetStateHistory = throttle(() => {
     this._getStateHistory();

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -2,7 +2,7 @@ import {
   css,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -26,11 +26,11 @@ export class MoreInfoLogbook extends LitElement {
 
   @property() public entityId!: string;
 
-  @internalProperty() private _logbookEntries?: LogbookEntry[];
+  @state() private _logbookEntries?: LogbookEntry[];
 
-  @internalProperty() private _traceContexts?: TraceContexts;
+  @state() private _traceContexts?: TraceContexts;
 
-  @internalProperty() private _persons = {};
+  @state() private _persons = {};
 
   private _lastLogbookDate?: Date;
 

src/dialogs/more-info/more-info-content.ts

@@ -1,17 +1,21 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { property, PropertyValues, UpdatingElement } from "lit-element";
+import { property, PropertyValues, ReactiveElement } from "lit-element";
 import dynamicContentUpdater from "../../common/dom/dynamic_content_updater";
 import { importMoreInfoControl } from "../../panels/lovelace/custom-card-helpers";
 import { HomeAssistant } from "../../types";
 import { stateMoreInfoType } from "./state_more_info_control";
 
-class MoreInfoContent extends UpdatingElement {
+class MoreInfoContent extends ReactiveElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
   private _detachedChild?: ChildNode;
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   // This is not a lit element, but an updating element, so we implement update
   protected update(changedProps: PropertyValues): void {
     super.update(changedProps);

src/dialogs/notifications/notification-item-template.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -20,7 +20,7 @@ export class HuiNotificationItemTemplate extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .contents {
         padding: 16px;

src/dialogs/notifications/persistent-notification-item.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -57,7 +57,7 @@ export class HuiPersistentNotificationItem extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .time {
         display: flex;

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -15,7 +15,7 @@ import {
   css,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   query,
@@ -87,19 +87,19 @@ type BaseNavigationCommand = Pick<
 export class QuickBar extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _commandItems?: CommandItem[];
+  @state() private _commandItems?: CommandItem[];
 
-  @internalProperty() private _entityItems?: EntityItem[];
+  @state() private _entityItems?: EntityItem[];
 
-  @internalProperty() private _filter = "";
+  @state() private _filter = "";
 
-  @internalProperty() private _search = "";
+  @state() private _search = "";
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _commandMode = false;
+  @state() private _commandMode = false;
 
-  @internalProperty() private _done = false;
+  @state() private _done = false;
 
   @query("paper-input", false) private _filterInputField?: HTMLElement;
 

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -4,10 +4,10 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -46,16 +46,16 @@ export class HaVoiceCommandDialog extends LitElement {
 
   @property() public results: Results | null = null;
 
-  @internalProperty() private _conversation: Message[] = [
+  @state() private _conversation: Message[] = [
     {
       who: "hass",
       text: "",
     },
   ];
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _agentInfo?: AgentInfo;
+  @state() private _agentInfo?: AgentInfo;
 
   @query("#messages", true) private messages!: PaperDialogScrollableElement;
 
@@ -360,7 +360,7 @@ export class HaVoiceCommandDialog extends LitElement {
     return `message ${message.who} ${message.error ? " error" : ""}`;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`

src/entrypoints/custom-panel.ts

@@ -10,6 +10,7 @@ import { createCustomPanelElement } from "../util/custom-panel/create-custom-pan
 import { loadCustomPanel } from "../util/custom-panel/load-custom-panel";
 import { setCustomPanelProperties } from "../util/custom-panel/set-custom-panel-properties";
 import { baseEntrypointStyles } from "../resources/styles";
+import { CSSResult } from "lit-element";
 
 declare global {
   interface Window {
@@ -101,7 +102,7 @@ function initialize(
         }
 
         const errorStyle = document.createElement("style");
-        errorStyle.innerHTML = baseEntrypointStyles.cssText;
+        errorStyle.innerHTML = (baseEntrypointStyles as CSSResult).cssText;
         document.body.appendChild(errorStyle);
 
         errorScreen.hass = properties.hass;

src/layouts/ha-init-page.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import { css, CSSResult, html, LitElement, property } from "lit-element";
+import { css, CSSResultGroup, html, LitElement, property } from "lit-element";
 import "../components/ha-circular-progress";
 import { removeInitSkeleton } from "../util/init-skeleton";
 
@@ -43,7 +43,7 @@ class HaInitPage extends LitElement {
     location.reload();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       div {
         height: 100%;

src/layouts/hass-error-screen.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -58,7 +58,7 @@ class HassErrorScreen extends LitElement {
     history.back();
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       css`
         :host {

src/layouts/hass-loading-screen.ts

@@ -1,7 +1,7 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -54,7 +54,7 @@ class HassLoadingScreen extends LitElement {
     history.back();
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`

src/layouts/hass-router-page.ts

@@ -1,4 +1,4 @@
-import { property, PropertyValues, UpdatingElement } from "lit-element";
+import { property, PropertyValues, ReactiveElement } from "lit-element";
 import memoizeOne from "memoize-one";
 import { navigate } from "../common/navigate";
 import { Route } from "../types";
@@ -46,7 +46,7 @@ export interface RouterOptions {
 // Time to wait for code to load before we show loading screen.
 const LOADING_SCREEN_THRESHOLD = 400; // ms
 
-export class HassRouterPage extends UpdatingElement {
+export class HassRouterPage extends ReactiveElement {
   @property() public route?: Route;
 
   protected routerOptions!: RouterOptions;
@@ -72,6 +72,10 @@ export class HassRouterPage extends UpdatingElement {
         };
   });
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   protected update(changedProps: PropertyValues) {
     super.update(changedProps);
 

src/layouts/hass-subpage.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   eventOptions,
   html,
@@ -62,7 +62,7 @@ class HassSubpage extends LitElement {
     history.back();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

src/layouts/hass-tabs-subpage-data-table.ts

@@ -3,7 +3,7 @@ import { mdiFilterVariant } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -238,7 +238,7 @@ export class HaTabsSubpageDataTable extends LitElement {
     fireEvent(this, "clear-filter");
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-data-table {
         width: 100%;

src/layouts/hass-tabs-subpage.ts

@@ -1,11 +1,11 @@
 import "@material/mwc-ripple";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   eventOptions,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -62,7 +62,7 @@ class HassTabsSubpage extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public rtl = false;
 
-  @internalProperty() private _activeTab?: PageNavigation;
+  @state() private _activeTab?: PageNavigation;
 
   // @ts-ignore
   @restoreScroll(".content") private _savedScrollPos?: number;
@@ -201,7 +201,7 @@ class HassTabsSubpage extends LitElement {
     history.back();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

src/layouts/home-assistant-main.ts

@@ -4,10 +4,10 @@ import "@polymer/app-layout/app-drawer/app-drawer";
 import type { AppDrawerElement } from "@polymer/app-layout/app-drawer/app-drawer";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -46,7 +46,7 @@ class HomeAssistantMain extends LitElement {
 
   @property({ type: Boolean }) public narrow?: boolean;
 
-  @internalProperty() private _sidebarEditMode = false;
+  @state() private _sidebarEditMode = false;
 
   protected render(): TemplateResult {
     const hass = this.hass;
@@ -186,7 +186,7 @@ class HomeAssistantMain extends LitElement {
     return this.shadowRoot!.querySelector("app-drawer-layout")!;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         color: var(--primary-text-color);

src/layouts/home-assistant.ts

@@ -1,10 +1,5 @@
 import "@polymer/app-route/app-location";
-import {
-  customElement,
-  html,
-  internalProperty,
-  PropertyValues,
-} from "lit-element";
+import { customElement, html, state, PropertyValues } from "lit-element";
 import { navigate } from "../common/navigate";
 import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import "../resources/custom-card-support";
@@ -21,11 +16,11 @@ import "./home-assistant-main";
 
 @customElement("home-assistant")
 export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
-  @internalProperty() private _route?: Route;
+  @state() private _route?: Route;
 
-  @internalProperty() private _error = false;
+  @state() private _error = false;
 
-  @internalProperty() private _panelUrl?: string;
+  @state() private _panelUrl?: string;
 
   private _haVersion?: string;
 

src/layouts/supervisor-error-screen.ts

@@ -2,7 +2,7 @@ import "../components/ha-card";
 import "@material/mwc-button";
 import {
   css,
-  CSSResultArray,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -112,7 +112,7 @@ class SupervisorErrorScreen extends LitElement {
     );
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`

src/managers/notification-manager.ts

@@ -1,9 +1,9 @@
 import "@material/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   query,
@@ -29,9 +29,9 @@ export interface ToastActionParams {
 class NotificationManager extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _action?: ToastActionParams;
+  @state() private _action?: ToastActionParams;
 
-  @internalProperty() private _noCancelOnOutsideClick = false;
+  @state() private _noCancelOnOutsideClick = false;
 
   @query("ha-toast") private _toast!: HaToast;
 
@@ -80,7 +80,7 @@ class NotificationManager extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-toast {
         display: flex;

src/mixins/provide-hass-lit-mixin.ts

@@ -1,11 +1,11 @@
-import { PropertyValues, UpdatingElement } from "lit-element";
+import { PropertyValues, ReactiveElement } from "lit-element";
 import { Constructor, HomeAssistant } from "../types";
 
 export interface ProvideHassElement {
   provideHass(element: HTMLElement);
 }
 
-export const ProvideHassLitMixin = <T extends Constructor<UpdatingElement>>(
+export const ProvideHassLitMixin = <T extends Constructor<ReactiveElement>>(
   superClass: T
 ) =>
   class extends superClass {

src/mixins/subscribe-mixin.ts

@@ -1,12 +1,12 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { property, PropertyValues, UpdatingElement } from "lit-element";
+import { property, PropertyValues, ReactiveElement } from "lit-element";
 import { Constructor, HomeAssistant } from "../types";
 
 export interface HassSubscribeElement {
   hassSubscribe(): UnsubscribeFunc[];
 }
 
-export const SubscribeMixin = <T extends Constructor<UpdatingElement>>(
+export const SubscribeMixin = <T extends Constructor<ReactiveElement>>(
   superClass: T
 ) => {
   class SubscribeClass extends superClass {

src/onboarding/action-badge.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -31,7 +31,7 @@ class ActionBadge extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-flex;

src/onboarding/ha-onboarding.ts

@@ -8,7 +8,7 @@ import {
 import {
   customElement,
   html,
-  internalProperty,
+  state,
   property,
   PropertyValues,
   TemplateResult,
@@ -66,13 +66,13 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
 
   public translationFragment = "page-onboarding";
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
-  @internalProperty() private _restoring = false;
+  @state() private _restoring = false;
 
-  @internalProperty() private _supervisor?: boolean;
+  @state() private _supervisor?: boolean;
 
-  @internalProperty() private _steps?: OnboardingStep[];
+  @state() private _steps?: OnboardingStep[];
 
   protected render(): TemplateResult {
     const step = this._curStep()!;

src/onboarding/integration-badge.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -35,7 +35,7 @@ class IntegrationBadge extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-flex;

src/onboarding/onboarding-analytics.ts

@@ -1,10 +1,10 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -23,9 +23,9 @@ class OnboardingAnalytics extends LitElement {
 
   @property() public localize!: LocalizeFunc;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _analyticsDetails: Analytics = {
+  @state() private _analyticsDetails: Analytics = {
     preferences: {},
   };
 
@@ -85,7 +85,7 @@ class OnboardingAnalytics extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .error {
         color: var(--error-color);

src/onboarding/onboarding-core-config.ts

@@ -5,10 +5,10 @@ import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   TemplateResult,
@@ -35,17 +35,17 @@ class OnboardingCoreConfig extends LitElement {
 
   @property() public onboardingLocalize!: LocalizeFunc;
 
-  @internalProperty() private _working = false;
+  @state() private _working = false;
 
-  @internalProperty() private _name!: ConfigUpdateValues["location_name"];
+  @state() private _name!: ConfigUpdateValues["location_name"];
 
-  @internalProperty() private _location!: [number, number];
+  @state() private _location!: [number, number];
 
-  @internalProperty() private _elevation!: string;
+  @state() private _elevation!: string;
 
-  @internalProperty() private _unitSystem!: ConfigUpdateValues["unit_system"];
+  @state() private _unitSystem!: ConfigUpdateValues["unit_system"];
 
-  @internalProperty() private _timeZone!: string;
+  @state() private _timeZone!: string;
 
   protected render(): TemplateResult {
     return html`
@@ -278,7 +278,7 @@ class OnboardingCoreConfig extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .row {
         display: flex;

src/onboarding/onboarding-create-user.ts

@@ -3,10 +3,10 @@ import "@polymer/paper-input/paper-input";
 import { genClientId } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
-  internalProperty,
+  state,
   LitElement,
   property,
   PropertyValues,
@@ -23,17 +23,17 @@ class OnboardingCreateUser extends LitElement {
 
   @property() public language!: string;
 
-  @internalProperty() private _name = "";
+  @state() private _name = "";
 
-  @internalProperty() private _username = "";
+  @state() private _username = "";
 
-  @internalProperty() private _password = "";
+  @state() private _password = "";
 
-  @internalProperty() private _passwordConfirm = "";
+  @state() private _passwordConfirm = "";
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
-  @internalProperty() private _errorMsg?: string = undefined;
+  @state() private _errorMsg?: string = undefined;
 
   protected render(): TemplateResult {
     return html`
@@ -199,7 +199,7 @@ class OnboardingCreateUser extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .error {
         color: red;

src/onboarding/onboarding-integrations.ts

@@ -1,12 +1,12 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
   property,
-  internalProperty,
+  state,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -37,9 +37,9 @@ class OnboardingIntegrations extends LitElement {
 
   @property() public onboardingLocalize!: LocalizeFunc;
 
-  @internalProperty() private _entries?: ConfigEntry[];
+  @state() private _entries?: ConfigEntry[];
 
-  @internalProperty() private _discovered?: DataEntryFlowProgress[];
+  @state() private _discovered?: DataEntryFlowProgress[];
 
   private _unsubEvents?: () => void;
 
@@ -175,7 +175,7 @@ class OnboardingIntegrations extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .badges {
         margin-top: 24px;

src/onboarding/onboarding-loading.ts

@@ -1,6 +1,6 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -13,7 +13,7 @@ class OnboardingLoading extends LitElement {
     return html` <div class="loader"></div> `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       /* MIT License (MIT). Copyright (c) 2014 Luke Haas */
       .loader,

src/onboarding/onboarding-restore-snapshot.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   customElement,
   html,
   LitElement,
@@ -86,7 +86,7 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`