Replace all private properties with internalProperty decorator (#6386)

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

@@ -8,6 +8,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { CastManager } from "../../../../src/cast/cast_manager";
@@ -41,9 +42,9 @@ class HcCast extends LitElement {
 
   @property() public castManager!: CastManager;
 
-  @property() private askWrite = false;
+  @internalProperty() private askWrite = false;
 
-  @property() private lovelaceConfig?: LovelaceConfig | null;
+  @internalProperty() private lovelaceConfig?: LovelaceConfig | null;
 
   protected render(): TemplateResult {
     if (this.lovelaceConfig === undefined) {

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

@@ -17,8 +17,8 @@ import {
   customElement,
   html,
   LitElement,
-  property,
   TemplateResult,
+  internalProperty,
 } 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 {
-  @property() private loading = false;
+  @internalProperty() private loading = false;
 
   // If we had stored credentials but we cannot connect,
   // show a screen asking retry or logout.
-  @property() private cannotConnect = false;
+  @internalProperty() private cannotConnect = false;
 
-  @property() private error?: string | TemplateResult;
+  @internalProperty() private error?: string | TemplateResult;
 
-  @property() private auth?: Auth;
+  @internalProperty() private auth?: Auth;
 
-  @property() private connection?: Connection;
+  @internalProperty() private connection?: Connection;
 
-  @property() private castManager?: CastManager | null;
+  @internalProperty() private castManager?: CastManager | null;
 
   private openDemo = false;
 

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

@@ -1,4 +1,10 @@
-import { customElement, html, property, TemplateResult } from "lit-element";
+import {
+  customElement,
+  html,
+  property,
+  internalProperty,
+  TemplateResult,
+} from "lit-element";
 import { mockHistory } from "../../../../demo/src/stubs/history";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import {
@@ -13,9 +19,9 @@ import "./hc-lovelace";
 
 @customElement("hc-demo")
 class HcDemo extends HassElement {
-  @property() public lovelacePath!: string;
+  @property({ attribute: false }) public lovelacePath!: string;
 
-  @property() private _lovelaceConfig?: LovelaceConfig;
+  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
 
   protected render(): TemplateResult {
     if (!this._lovelaceConfig) {

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

@@ -11,7 +11,7 @@ import { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")
 class HcLaunchScreen extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public error?: string;
 

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

@@ -16,9 +16,9 @@ import "./hc-launch-screen";
 
 @customElement("hc-lovelace")
 class HcLovelace extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public lovelaceConfig!: LovelaceConfig;
+  @property({ attribute: false }) public lovelaceConfig!: LovelaceConfig;
 
   @property() public viewPath?: string | number;
 

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

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

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

@@ -4,7 +4,7 @@ import {
   customElement,
   html,
   LitElement,
-  property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { CastManager } from "../../../src/cast/cast_manager";
@@ -20,7 +20,7 @@ import { HomeAssistant } from "../../../src/types";
 class CastDemoRow extends LitElement implements LovelaceRow {
   public hass!: HomeAssistant;
 
-  @property() private _castManager?: CastManager | null;
+  @internalProperty() private _castManager?: CastManager | null;
 
   public setConfig(_config: CastConfig): void {
     // No config possible.

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

@@ -5,6 +5,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { until } from "lit-html/directives/until";
@@ -21,11 +22,11 @@ import {
 } from "../configs/demo-configs";
 
 export class HADemoCard extends LitElement implements LovelaceCard {
-  @property() public lovelace?: Lovelace;
+  @property({ attribute: false }) public lovelace?: Lovelace;
 
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
 
-  @property() private _switching?: boolean;
+  @internalProperty() private _switching?: boolean;
 
   private _hidden = localStorage.hide_demo_card;
 

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

@@ -21,7 +21,7 @@ import { filterAndSort } from "../components/hassio-filter-addons";
 import { hassioStyle } from "../resources/hassio-style";
 
 class HassioAddonRepositoryEl extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public repo!: HassioAddonRepository;
 

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

@@ -6,6 +6,7 @@ import {
   CSSResult,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
@@ -52,7 +53,7 @@ class HassioAddonStore extends LitElement {
 
   @property({ attribute: false }) private _repos?: HassioAddonRepository[];
 
-  @property() private _filter?: string;
+  @internalProperty() private _filter?: string;
 
   public async refreshData() {
     this._repos = undefined;

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

@@ -9,6 +9,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -34,15 +35,15 @@ class HassioAddonAudio extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _inputDevices?: HassioHardwareAudioDevice[];
+  @internalProperty() private _inputDevices?: HassioHardwareAudioDevice[];
 
-  @property() private _outputDevices?: HassioHardwareAudioDevice[];
+  @internalProperty() private _outputDevices?: HassioHardwareAudioDevice[];
 
-  @property() private _selectedInput!: null | string;
+  @internalProperty() private _selectedInput!: null | string;
 
-  @property() private _selectedOutput!: null | string;
+  @internalProperty() private _selectedOutput!: null | string;
 
   protected render(): TemplateResult {
     return html`

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

@@ -7,6 +7,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   query,
   TemplateResult,
@@ -32,7 +33,7 @@ class HassioAddonConfig extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
   @property({ type: Boolean }) private _configHasChanged = false;
 

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

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -37,9 +38,9 @@ class HassioAddonNetwork extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _config?: NetworkItem[];
+  @internalProperty() private _config?: NetworkItem[];
 
   public connectedCallback(): void {
     super.connectedCallback();

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

@@ -5,6 +5,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../../../src/components/ha-markdown";
@@ -24,9 +25,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
 
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _content?: string;
+  @internalProperty() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();

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

@@ -23,6 +23,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
@@ -124,7 +125,7 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
   @property({ type: Boolean }) private _installing = false;
 

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

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../../../src/components/ha-card";
@@ -24,9 +25,9 @@ class HassioAddonLogs extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _content?: string;
+  @internalProperty() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();

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

@@ -14,7 +14,7 @@ import { HomeAssistant } from "../../../src/types";
 
 @customElement("hassio-card-content")
 class HassioCardContent extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public title!: string;
 

hassio/src/dashboard/hassio-addons.ts

@@ -19,7 +19,7 @@ import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-addons")
 class HassioAddons extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public addons?: HassioAddonInfo[];
 

hassio/src/dashboard/hassio-update.ts

@@ -7,6 +7,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../../src/components/buttons/ha-call-api-button";
@@ -23,15 +24,15 @@ import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-update")
 export class HassioUpdate extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public hassInfo: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo;
 
-  @property() public hassOsInfo?: HassioHassOSInfo;
+  @property({ attribute: false }) public hassOsInfo?: HassioHassOSInfo;
 
   @property() public supervisorInfo: HassioSupervisorInfo;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
   protected render(): TemplateResult {
     const updatesAvailable: number = [

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

@@ -5,6 +5,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
@@ -16,13 +17,13 @@ import { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
 
 @customElement("dialog-hassio-markdown")
 class HassioMarkdownDialog extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public title!: string;
 
   @property() public content!: string;
 
-  @property() private _opened = false;
+  @internalProperty() private _opened = false;
 
   public showDialog(params: HassioMarkdownDialogParams) {
     this.title = params.title;

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

@@ -13,6 +13,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   query,
   TemplateResult,
 } from "lit-element";
@@ -39,11 +40,11 @@ class HassioRepositoriesDialog extends LitElement {
 
   @query("#repository_input") private _optionInput?: PaperInputElement;
 
-  @property() private _opened = false;
+  @internalProperty() private _opened = false;
 
-  @property() private _prosessing = false;
+  @internalProperty() private _prosessing = false;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
   public async showDialog(_dialogParams: any): Promise<void> {
     this._dialogParams = _dialogParams;

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

@@ -9,6 +9,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
@@ -68,21 +69,21 @@ interface FolderItem {
 
 @customElement("dialog-hassio-snapshot")
 class HassioSnapshotDialog extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _snapshot?: HassioSnapshotDetail;
+  @internalProperty() private _snapshot?: HassioSnapshotDetail;
 
-  @property() private _folders!: FolderItem[];
+  @internalProperty() private _folders!: FolderItem[];
 
-  @property() private _addons!: AddonItem[];
+  @internalProperty() private _addons!: AddonItem[];
 
-  @property() private _dialogParams?: HassioSnapshotDialogParams;
+  @internalProperty() private _dialogParams?: HassioSnapshotDialogParams;
 
-  @property() private _snapshotPassword!: string;
+  @internalProperty() private _snapshotPassword!: string;
 
-  @property() private _restoreHass: boolean | null | undefined = true;
+  @internalProperty() private _restoreHass: boolean | null | undefined = true;
 
   public async showDialog(params: HassioSnapshotDialogParams) {
     this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);

hassio/src/hassio-main.ts

@@ -1,5 +1,10 @@
 import { PolymerElement } from "@polymer/polymer";
-import { customElement, property, PropertyValues } from "lit-element";
+import {
+  customElement,
+  property,
+  internalProperty,
+  PropertyValues,
+} from "lit-element";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
 import { navigate } from "../../src/common/navigate";
@@ -37,7 +42,7 @@ import "./hassio-panel";
 
 @customElement("hassio-main")
 class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public panel!: HassioPanelInfo;
 
@@ -73,15 +78,15 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
     },
   };
 
-  @property() private _supervisorInfo: HassioSupervisorInfo;
+  @internalProperty() private _supervisorInfo: HassioSupervisorInfo;
 
-  @property() private _hostInfo: HassioHostInfo;
+  @internalProperty() private _hostInfo: HassioHostInfo;
 
-  @property() private _hassioInfo?: HassioInfo;
+  @internalProperty() private _hassioInfo?: HassioInfo;
 
-  @property() private _hassOsInfo?: HassioHassOSInfo;
+  @internalProperty() private _hassOsInfo?: HassioHassOSInfo;
 
-  @property() private _hassInfo: HassioHomeAssistantInfo;
+  @internalProperty() private _hassInfo: HassioHomeAssistantInfo;
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);

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

@@ -5,6 +5,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -19,11 +20,11 @@ import { HomeAssistant, Route } from "../../../src/types";
 
 @customElement("hassio-ingress-view")
 class HassioIngressView extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public route!: Route;
 
-  @property() private _addon?: HassioAddonDetails;
+  @internalProperty() private _addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
     if (!this._addon) {

hassio/src/snapshots/hassio-snapshots.ts

@@ -15,6 +15,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -56,19 +57,19 @@ class HassioSnapshots extends LitElement {
 
   @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
 
-  @property() private _snapshotName = "";
+  @internalProperty() private _snapshotName = "";
 
-  @property() private _snapshotPassword = "";
+  @internalProperty() private _snapshotPassword = "";
 
-  @property() private _snapshotHasPassword = false;
+  @internalProperty() private _snapshotHasPassword = false;
 
-  @property() private _snapshotType: HassioSnapshot["type"] = "full";
+  @internalProperty() private _snapshotType: HassioSnapshot["type"] = "full";
 
-  @property() private _snapshots?: HassioSnapshot[] = [];
+  @internalProperty() private _snapshots?: HassioSnapshot[] = [];
 
-  @property() private _addonList: CheckboxItem[] = [];
+  @internalProperty() private _addonList: CheckboxItem[] = [];
 
-  @property() private _folderList: CheckboxItem[] = [
+  @internalProperty() private _folderList: CheckboxItem[] = [
     {
       slug: "homeassistant",
       name: "Home Assistant configuration",
@@ -79,9 +80,9 @@ class HassioSnapshots extends LitElement {
     { slug: "addons/local", name: "Local add-ons", checked: true },
   ];
 
-  @property() private _creatingSnapshot = false;
+  @internalProperty() private _creatingSnapshot = false;
 
-  @property() private _error = "";
+  @internalProperty() private _error = "";
 
   public async refreshData() {
     await reloadHassioSnapshots(this.hass);

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

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../../src/components/buttons/ha-call-api-button";
@@ -32,15 +33,15 @@ import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-host-info")
 class HassioHostInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public hostInfo!: HassioHostInfoType;
 
   @property({ attribute: false }) public hassioInfo!: HassioInfo;
 
-  @property() public hassOsInfo!: HassioHassOSInfo;
+  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 
-  @property() private _errors?: string;
+  @internalProperty() private _errors?: string;
 
   public render(): TemplateResult | void {
     return html`

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

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
@@ -23,11 +24,11 @@ import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-supervisor-info")
 class HassioSupervisorInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public supervisorInfo!: HassioSupervisorInfoType;
 
-  @property() private _errors?: string;
+  @internalProperty() private _errors?: string;
 
   public render(): TemplateResult | void {
     return html`

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

@@ -9,6 +9,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../../src/components/ha-card";
@@ -55,11 +56,11 @@ const logProviders: LogProvider[] = [
 class HassioSupervisorLog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _selectedLogProvider = "supervisor";
+  @internalProperty() private _selectedLogProvider = "supervisor";
 
-  @property() private _content?: string;
+  @internalProperty() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();

src/auth/ha-auth-flow.ts

@@ -5,6 +5,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -28,13 +29,13 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
 
   @property() public oauth2State?: string;
 
-  @property() private _state: State = "loading";
+  @internalProperty() private _state: State = "loading";
 
-  @property() private _stepData: any = {};
+  @internalProperty() private _stepData: any = {};
 
-  @property() private _step?: DataEntryFlowStep;
+  @internalProperty() private _step?: DataEntryFlowStep;
 
-  @property() private _errorMessage?: string;
+  @internalProperty() private _errorMessage?: string;
 
   protected render() {
     return html`

src/auth/ha-authorize.ts

@@ -4,6 +4,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
 } from "lit-element";
 import {
@@ -25,9 +26,9 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
   @property() public oauth2State?: string;
 
-  @property() private _authProvider?: AuthProvider;
+  @internalProperty() private _authProvider?: AuthProvider;
 
-  @property() private _authProviders?: AuthProvider[];
+  @internalProperty() private _authProviders?: AuthProvider[];
 
   constructor() {
     super();

src/common/dom/load_resource.ts

@@ -23,7 +23,8 @@ const _load = (
         if (type) {
           (element as HTMLScriptElement).type = type;
           // https://github.com/home-assistant/frontend/pull/6328
-          (element as HTMLScriptElement).crossOrigin = url.substr(0, 1) === "/" ? "use-credentials" : "anonymous";
+          (element as HTMLScriptElement).crossOrigin =
+            url.substr(0, 1) === "/" ? "use-credentials" : "anonymous";
         }
         break;
       case "link":

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

@@ -6,11 +6,11 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   query,
   TemplateResult,
   eventOptions,
-  internalProperty,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";

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

@@ -13,6 +13,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -87,7 +88,7 @@ const rowRenderer = (
 
 @customElement("ha-area-devices-picker")
 export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
 
@@ -124,13 +125,13 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
   @property({ type: Boolean })
   private _opened?: boolean;
 
-  @property() private _areaPicker = true;
+  @internalProperty() private _areaPicker = true;
 
-  @property() private _devices?: DeviceRegistryEntry[];
+  @internalProperty() private _devices?: DeviceRegistryEntry[];
 
-  @property() private _areas?: AreaRegistryEntry[];
+  @internalProperty() private _areas?: AreaRegistryEntry[];
 
-  @property() private _entities?: EntityRegistryEntry[];
+  @internalProperty() private _entities?: EntityRegistryEntry[];
 
   private _selectedDevices: string[] = [];
 

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

@@ -8,6 +8,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -24,7 +25,7 @@ const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
 export abstract class HaDeviceAutomationPicker<
   T extends DeviceAutomation
 > extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
 
@@ -36,11 +37,11 @@ export abstract class HaDeviceAutomationPicker<
 
   protected UNKNOWN_AUTOMATION_TEXT = "Unknown automation";
 
-  @property() private _automations: T[] = [];
+  @internalProperty() private _automations: T[] = [];
 
   // Trigger an empty render so we start with a clean DOM.
   // paper-listbox does not like changing things around.
-  @property() private _renderEmpty = false;
+  @internalProperty() private _renderEmpty = false;
 
   private _localizeDeviceAutomation: (
     hass: HomeAssistant,

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

@@ -66,7 +66,7 @@ const rowRenderer = (root: HTMLElement, _owner, model: { item: Device }) => {
 
 @customElement("ha-device-picker")
 export class HaDevicePicker extends SubscribeMixin(LitElement) {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
 

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

@@ -12,7 +12,7 @@ import "./ha-device-picker";
 
 @customElement("ha-devices-picker")
 class HaDevicesPicker extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public value?: string[];
 

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

@@ -15,7 +15,7 @@ import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";
 
 @customElement("ha-entities-picker")
 class HaEntitiesPickerLight extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public value?: string[];
 

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

@@ -59,7 +59,7 @@ class HaEntityPicker extends LitElement {
   @property({ type: Boolean, attribute: "allow-custom-entity" })
   public allowCustomEntity;
 
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public label?: string;
 

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

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -28,7 +29,7 @@ export class HaEntityToggle extends LitElement {
 
   @property() public stateObj?: HassEntity;
 
-  @property() private _isOn = false;
+  @internalProperty() private _isOn = false;
 
   protected render(): TemplateResult {
     if (!this.stateObj) {

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

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -22,7 +23,7 @@ import "../ha-label-badge";
 
 @customElement("ha-state-label-badge")
 export class HaStateLabelBadge extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public state?: HassEntity;
 
@@ -32,7 +33,7 @@ export class HaStateLabelBadge extends LitElement {
 
   @property() public image?: string;
 
-  @property() private _timerTimeRemaining?: number;
+  @internalProperty() private _timerTimeRemaining?: number;
 
   private _connected?: boolean;
 

src/components/entity/state-badge.ts

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -31,7 +32,7 @@ export class StateBadge extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "icon" })
   private _showIcon = true;
 
-  @property() private _iconStyle: { [name: string]: string } = {};
+  @internalProperty() private _iconStyle: { [name: string]: string } = {};
 
   protected render(): TemplateResult {
     const stateObj = this.stateObj;

src/components/ha-area-picker.ts

@@ -12,6 +12,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
@@ -61,7 +62,7 @@ const rowRenderer = (
 
 @customElement("ha-area-picker")
 export class HaAreaPicker extends SubscribeMixin(LitElement) {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
 
@@ -72,7 +73,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
   @property({ type: Boolean, attribute: "no-add" })
   public noAdd?: boolean;
 
-  @property() private _opened?: boolean;
+  @internalProperty() private _opened?: boolean;
 
   public hassSubscribe(): UnsubscribeFunc[] {
     return [

src/components/ha-camera-stream.ts

@@ -5,6 +5,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -22,17 +23,17 @@ type HLSModule = typeof import("hls.js");
 
 @customElement("ha-camera-stream")
 class HaCameraStream extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public stateObj?: CameraEntity;
 
   @property({ type: Boolean }) public showControls = false;
 
-  @property() private _attached = false;
+  @internalProperty() private _attached = false;
 
   // We keep track if we should force MJPEG with a string
   // that way it automatically resets if we change entity.
-  @property() private _forceMJPEG: string | undefined = undefined;
+  @internalProperty() private _forceMJPEG: string | undefined = undefined;
 
   private _hlsPolyfillInstance?: Hls;
 

src/components/ha-code-editor.ts

@@ -2,6 +2,7 @@ import { Editor } from "codemirror";
 import {
   customElement,
   property,
+  internalProperty,
   PropertyValues,
   UpdatingElement,
 } from "lit-element";
@@ -28,7 +29,7 @@ export class HaCodeEditor extends UpdatingElement {
 
   @property() public error = false;
 
-  @property() private _value = "";
+  @internalProperty() private _value = "";
 
   public set value(value: string) {
     this._value = value;

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

@@ -24,7 +24,7 @@ export interface DateRangePickerRanges {
 
 @customElement("ha-date-range-picker")
 export class HaDateRangePicker extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public startDate!: Date;
 

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

@@ -11,6 +11,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   query,
   TemplateResult,
 } from "lit-element";
@@ -32,7 +33,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
 
   @property() public suffix!: string;
 
-  @property() private _init = false;
+  @internalProperty() private _init = false;
 
   @query("paper-menu-button") private _input?: HTMLElement;
 

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

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   query,
   TemplateResult,
 } from "lit-element";
@@ -26,7 +27,7 @@ export class HaFormString extends LitElement implements HaFormElement {
 
   @property() public suffix!: string;
 
-  @property() private _unmaskedPassword = false;
+  @internalProperty() private _unmaskedPassword = false;
 
   @query("paper-input") private _input?: HTMLElement;
 

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

@@ -1,6 +1,7 @@
 import {
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
   html,
   customElement,
@@ -13,7 +14,7 @@ import "./ha-svg-icon";
 export class HaIconButtonArrowNext extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
-  @property() private _icon = mdiArrowRight;
+  @internalProperty() private _icon = mdiArrowRight;
 
   public connectedCallback() {
     super.connectedCallback();

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

@@ -1,6 +1,7 @@
 import {
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
   html,
   customElement,
@@ -13,7 +14,7 @@ import "./ha-svg-icon";
 export class HaIconButtonArrowPrev extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
-  @property() private _icon = mdiArrowLeft;
+  @internalProperty() private _icon = mdiArrowLeft;
 
   public connectedCallback() {
     super.connectedCallback();

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

@@ -1,6 +1,7 @@
 import {
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
   html,
   customElement,
@@ -13,7 +14,7 @@ import "./ha-svg-icon";
 export class HaIconButtonNext extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
-  @property() private _icon = mdiChevronRight;
+  @internalProperty() private _icon = mdiChevronRight;
 
   public connectedCallback() {
     super.connectedCallback();

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

@@ -1,6 +1,7 @@
 import {
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
   html,
   customElement,
@@ -13,7 +14,7 @@ import "./ha-svg-icon";
 export class HaIconButtonPrev extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
-  @property() private _icon = mdiChevronLeft;
+  @internalProperty() private _icon = mdiChevronLeft;
 
   public connectedCallback() {
     super.connectedCallback();

src/components/ha-icon.ts

@@ -3,6 +3,7 @@ import {
   customElement,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   html,
   TemplateResult,
@@ -233,11 +234,11 @@ const cachedIcons: { [key: string]: string } = {};
 export class HaIcon extends LitElement {
   @property() public icon?: string;
 
-  @property() private _path?: string;
+  @internalProperty() private _path?: string;
 
-  @property() private _viewBox?;
+  @internalProperty() private _viewBox?;
 
-  @property() private _legacy = false;
+  @internalProperty() private _legacy = false;
 
   protected updated(changedProps: PropertyValues) {
     if (changedProps.has("icon")) {

src/components/ha-menu-button.ts

@@ -8,6 +8,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
@@ -22,9 +23,9 @@ class HaMenuButton extends LitElement {
 
   @property() public narrow!: boolean;
 
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _hasNotifications = false;
+  @internalProperty() private _hasNotifications = false;
 
   private _alwaysVisible = false;
 

src/components/ha-related-items.ts

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -27,19 +28,19 @@ import "./ha-switch";
 
 @customElement("ha-related-items")
 export class HaRelatedItems extends SubscribeMixin(LitElement) {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public itemType!: ItemType;
 
   @property() public itemId!: string;
 
-  @property() private _entries?: ConfigEntry[];
+  @internalProperty() private _entries?: ConfigEntry[];
 
-  @property() private _devices?: DeviceRegistryEntry[];
+  @internalProperty() private _devices?: DeviceRegistryEntry[];
 
-  @property() private _areas?: AreaRegistryEntry[];
+  @internalProperty() private _areas?: AreaRegistryEntry[];
 
-  @property() private _related?: RelatedResult;
+  @internalProperty() private _related?: RelatedResult;
 
   public hassSubscribe(): UnsubscribeFunc[] {
     return [

src/components/ha-sidebar.ts

@@ -18,6 +18,7 @@ import {
   customElement,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
@@ -111,7 +112,7 @@ const computePanels = (hass: HomeAssistant): [PanelInfo[], PanelInfo[]] => {
 
 @customElement("ha-sidebar")
 class HaSidebar extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public narrow!: boolean;
 
@@ -119,9 +120,9 @@ class HaSidebar extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @property() private _externalConfig?: ExternalConfig;
+  @internalProperty() private _externalConfig?: ExternalConfig;
 
-  @property() private _notifications?: PersistentNotification[];
+  @internalProperty() private _notifications?: PersistentNotification[];
 
   // property used only in css
   // @ts-ignore

src/components/ha-tab.ts

@@ -4,10 +4,10 @@ import {
   customElement,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
   html,
   queryAsync,
-  internalProperty,
   eventOptions,
 } from "lit-element";
 import "@material/mwc-ripple/mwc-ripple";

src/components/ha-yaml-editor.ts

@@ -4,6 +4,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   query,
   TemplateResult,
 } from "lit-element";
@@ -41,7 +42,7 @@ export class HaYamlEditor extends LitElement {
 
   @property() public label?: string;
 
-  @property() private _yaml = "";
+  @internalProperty() private _yaml = "";
 
   @query("ha-code-editor") private _editor?: HaCodeEditor;
 

src/components/map/ha-map.ts

@@ -22,7 +22,7 @@ import { HomeAssistant } from "../../types";
 
 @customElement("ha-map")
 class HaMap extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public entities?: string[];
 

src/data/config_flow.ts

@@ -5,7 +5,13 @@ import { HomeAssistant } from "../types";
 import { DataEntryFlowProgress, DataEntryFlowStep } from "./data_entry_flow";
 import { domainToName } from "./integration";
 
-export const DISCOVERY_SOURCES = ["unignore", "homekit", "ssdp", "zeroconf", "discovery"];
+export const DISCOVERY_SOURCES = [
+  "unignore",
+  "homekit",
+  "ssdp",
+  "zeroconf",
+  "discovery",
+];
 
 export const createConfigFlow = (hass: HomeAssistant, handler: string) =>
   hass.callApi<DataEntryFlowStep>("POST", "config/config_entries/flow", {

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

@@ -7,6 +7,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../components/dialog/ha-paper-dialog";
@@ -26,17 +27,17 @@ import { computeRTLDirection } from "../../common/util/compute_rtl";
 
 @customElement("dialog-config-entry-system-options")
 class DialogConfigEntrySystemOptions extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _disableNewEntities!: boolean;
+  @internalProperty() private _disableNewEntities!: boolean;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _params?: ConfigEntrySystemOptionsDialogParams;
+  @internalProperty() private _params?: ConfigEntrySystemOptionsDialogParams;
 
-  @property() private _loading?: boolean;
+  @internalProperty() private _loading?: boolean;
 
-  @property() private _submitting?: boolean;
+  @internalProperty() private _submitting?: boolean;
 
   public async showDialog(
     params: ConfigEntrySystemOptionsDialogParams

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

@@ -10,7 +10,7 @@ import {
   customElement,
   html,
   LitElement,
-  property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -54,23 +54,23 @@ declare global {
 class DataEntryFlowDialog extends LitElement {
   public hass!: HomeAssistant;
 
-  @property() private _params?: DataEntryFlowDialogParams;
+  @internalProperty() private _params?: DataEntryFlowDialogParams;
 
-  @property() private _loading = true;
+  @internalProperty() private _loading = true;
 
   private _instance = instance;
 
-  @property() private _step:
+  @internalProperty() private _step:
     | DataEntryFlowStep
     | undefined
     // Null means we need to pick a config flow
     | null;
 
-  @property() private _devices?: DeviceRegistryEntry[];
+  @internalProperty() private _devices?: DeviceRegistryEntry[];
 
-  @property() private _areas?: AreaRegistryEntry[];
+  @internalProperty() private _areas?: AreaRegistryEntry[];
 
-  @property() private _handlers?: string[];
+  @internalProperty() private _handlers?: string[];
 
   private _unsubAreas?: UnsubscribeFunc;
 

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

@@ -8,6 +8,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
@@ -31,13 +32,13 @@ interface HandlerObj {
 class StepFlowPickHandler extends LitElement {
   public flowConfig!: FlowConfig;
 
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public handlers!: string[];
 
   @property() public showAdvanced?: boolean;
 
-  @property() private filter?: string;
+  @internalProperty() private filter?: string;
 
   private _width?: number;
 

src/dialogs/device-registry-detail/dialog-device-registry-detail.ts

@@ -11,6 +11,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../components/dialog/ha-paper-dialog";
@@ -23,15 +24,15 @@ import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry-
 
 @customElement("dialog-device-registry-detail")
 class DialogDeviceRegistryDetail extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _nameByUser!: string;
+  @internalProperty() private _nameByUser!: string;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _params?: DeviceRegistryDetailDialogParams;
+  @internalProperty() private _params?: DeviceRegistryDetailDialogParams;
 
-  @property() private _areaId?: string;
+  @internalProperty() private _areaId?: string;
 
   private _submitting?: boolean;
 

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

@@ -5,7 +5,7 @@ import {
   customElement,
   html,
   LitElement,
-  property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../components/dialog/ha-paper-dialog";
@@ -19,7 +19,7 @@ import { HaDomainTogglerDialogParams } from "./show-dialog-domain-toggler";
 class DomainTogglerDialog extends LitElement {
   public hass!: HomeAssistant;
 
-  @property() private _params?: HaDomainTogglerDialogParams;
+  @internalProperty() private _params?: HaDomainTogglerDialogParams;
 
   public async showDialog(params: HaDomainTogglerDialogParams): Promise<void> {
     this._params = params;

src/dialogs/generic/dialog-box.ts

@@ -7,6 +7,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
@@ -20,11 +21,11 @@ import { fireEvent } from "../../common/dom/fire_event";
 
 @customElement("dialog-box")
 class DialogBox extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _params?: DialogParams;
+  @internalProperty() private _params?: DialogParams;
 
-  @property() private _value?: string;
+  @internalProperty() private _value?: string;
 
   public async showDialog(params: DialogParams): Promise<void> {
     this._params = params;

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

@@ -15,7 +15,7 @@ import { HomeAssistant } from "../../../types";
 
 @customElement("more-info-automation")
 class MoreInfoAutomation extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public stateObj?: HassEntity;
 

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

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -20,13 +21,13 @@ import {
 import type { CameraEntity, HomeAssistant } from "../../../types";
 
 class MoreInfoCamera extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public stateObj?: CameraEntity;
 
-  @property() private _cameraPrefs?: CameraPreferences;
+  @internalProperty() private _cameraPrefs?: CameraPreferences;
 
-  @property() private _attached = false;
+  @internalProperty() private _attached = false;
 
   public connectedCallback() {
     super.connectedCallback();

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

@@ -32,7 +32,7 @@ import {
 import { HomeAssistant } from "../../../types";
 
 class MoreInfoClimate extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public stateObj?: ClimateEntity;
 

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

@@ -13,7 +13,7 @@ import { HomeAssistant } from "../../../types";
 
 @customElement("more-info-counter")
 class MoreInfoCounter extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public stateObj?: HassEntity;
 

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

@@ -11,7 +11,7 @@ import { HomeAssistant } from "../../../types";
 
 @customElement("more-info-default")
 class MoreInfoDefault extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public stateObj?: HassEntity;
 

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

@@ -24,7 +24,7 @@ import {
 import { HomeAssistant } from "../../../types";
 
 class MoreInfoHumidifier extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public stateObj?: HumidifierEntity;
 

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

@@ -18,7 +18,7 @@ import { HomeAssistant } from "../../../types";
 
 @customElement("more-info-person")
 class MoreInfoPerson extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public stateObj?: HassEntity;
 

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

@@ -11,7 +11,7 @@ import { HomeAssistant } from "../../../types";
 
 @customElement("more-info-script")
 class MoreInfoScript extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public stateObj?: HassEntity;
 

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

@@ -14,7 +14,7 @@ import { HomeAssistant } from "../../../types";
 
 @customElement("more-info-sun")
 class MoreInfoSun extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public stateObj?: HassEntity;
 

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

@@ -14,7 +14,7 @@ import { HomeAssistant } from "../../../types";
 
 @customElement("more-info-timer")
 class MoreInfoTimer extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public stateObj?: TimerEntity;
 

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

@@ -90,7 +90,7 @@ const VACUUM_COMMANDS: VacuumCommand[] = [
 
 @customElement("more-info-vacuum")
 class MoreInfoVacuum extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public stateObj?: VacuumEntity;
 

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

@@ -51,7 +51,7 @@ const weatherIcons = {
 
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public stateObj?: HassEntity;
 

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

@@ -18,9 +18,9 @@ import {
   customElement,
   LitElement,
   property,
+  internalProperty,
   css,
   html,
-  internalProperty,
 } from "lit-element";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
@@ -39,7 +39,7 @@ export interface MoreInfoDialogParams {
 
 @customElement("ha-more-info-dialog")
 export class MoreInfoDialog extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, reflect: true }) public large = false;
 

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

@@ -27,7 +27,7 @@ import "./controls/more-info-water_heater";
 import "./controls/more-info-weather";
 
 class MoreInfoContent extends UpdatingElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public stateObj?: HassEntity;
 

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

@@ -15,7 +15,7 @@ import "./notification-item-template";
 
 @customElement("configurator-notification-item")
 export class HuiConfiguratorNotificationItem extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public notification?: PersitentNotificationEntity;
 

src/dialogs/notifications/notification-item.ts

@@ -14,7 +14,7 @@ import "./persistent-notification-item";
 
 @customElement("notification-item")
 export class HuiNotificationItem extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public notification?: HassEntity | PersistentNotification;
 

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

@@ -17,7 +17,7 @@ import "./notification-item-template";
 
 @customElement("persistent-notification-item")
 export class HuiPersistentNotificationItem extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public notification?: PersistentNotification;
 

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

@@ -10,6 +10,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   query,
   TemplateResult,
@@ -41,20 +42,20 @@ interface Results {
 
 @customElement("ha-voice-command-dialog")
 export class HaVoiceCommandDialog extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public results: Results | null = null;
 
-  @property() private _conversation: Message[] = [
+  @internalProperty() private _conversation: Message[] = [
     {
       who: "hass",
       text: "",
     },
   ];
 
-  @property() private _opened = false;
+  @internalProperty() private _opened = false;
 
-  @property() private _agentInfo?: AgentInfo;
+  @internalProperty() private _agentInfo?: AgentInfo;
 
   @query("#messages") private messages!: PaperDialogScrollableElement;
 

src/layouts/hass-loading-screen.ts

@@ -21,7 +21,7 @@ class HassLoadingScreen extends LitElement {
 
   @property({ type: Boolean }) public rootnav = false;
 
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public narrow?: boolean;
 

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

@@ -24,7 +24,7 @@ import { computeRTLDirection } from "../common/util/compute_rtl";
 
 @customElement("hass-tabs-subpage-data-table")
 export class HaTabsSubpageDataTable extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public isWide!: boolean;
 

src/layouts/hass-tabs-subpage.ts

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
   eventOptions,
@@ -36,7 +37,7 @@ export interface PageNavigation {
 
 @customElement("hass-tabs-subpage")
 class HassTabsSubpage extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public hassio = false;
 
@@ -52,7 +53,7 @@ class HassTabsSubpage extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @property() private _activeTab?: PageNavigation;
+  @internalProperty() private _activeTab?: PageNavigation;
 
   // @ts-ignore
   @restoreScroll(".content") private _savedScrollPos?: number;

src/layouts/home-assistant-main.ts

@@ -31,7 +31,7 @@ declare global {
 
 @customElement("home-assistant-main")
 class HomeAssistantMain extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public route?: Route;
 

src/layouts/home-assistant.ts

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

src/layouts/partial-panel-resolver.ts

@@ -87,7 +87,7 @@ const getRoutes = (panels: Panels): RouterOptions => {
 
 @customElement("partial-panel-resolver")
 class PartialPanelResolver extends HassRouterPage {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public narrow?: boolean;
 

src/managers/notification-manager.ts

@@ -5,6 +5,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   query,
   TemplateResult,
 } from "lit-element";
@@ -26,11 +27,11 @@ export interface ToastActionParams {
 }
 
 class NotificationManager extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _action?: ToastActionParams;
+  @internalProperty() private _action?: ToastActionParams;
 
-  @property() private _noCancelOnOutsideClick = false;
+  @internalProperty() private _noCancelOnOutsideClick = false;
 
   @query("ha-toast") private _toast!: HaToast;
 

src/mixins/subscribe-mixin.ts

@@ -10,7 +10,7 @@ export const SubscribeMixin = <T extends Constructor<UpdatingElement>>(
   superClass: T
 ) => {
   class SubscribeClass extends superClass {
-    @property() public hass?: HomeAssistant;
+    @property({ attribute: false }) public hass?: HomeAssistant;
 
     private __unsubs?: Array<UnsubscribeFunc | Promise<UnsubscribeFunc>>;
 

src/onboarding/ha-onboarding.ts

@@ -9,6 +9,7 @@ import {
   customElement,
   html,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -55,13 +56,13 @@ declare global {
 
 @customElement("ha-onboarding")
 class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   public translationFragment = "page-onboarding";
 
-  @property() private _loading = false;
+  @internalProperty() private _loading = false;
 
-  @property() private _steps?: OnboardingStep[];
+  @internalProperty() private _steps?: OnboardingStep[];
 
   protected render(): TemplateResult {
     const step = this._curStep()!;

src/onboarding/onboarding-core-config.ts

@@ -10,6 +10,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
@@ -29,21 +30,21 @@ const amsterdam = [52.3731339, 4.8903147];
 
 @customElement("onboarding-core-config")
 class OnboardingCoreConfig extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public onboardingLocalize!: LocalizeFunc;
 
-  @property() private _working = false;
+  @internalProperty() private _working = false;
 
-  @property() private _name!: ConfigUpdateValues["location_name"];
+  @internalProperty() private _name!: ConfigUpdateValues["location_name"];
 
-  @property() private _location!: [number, number];
+  @internalProperty() private _location!: [number, number];
 
-  @property() private _elevation!: string;
+  @internalProperty() private _elevation!: string;
 
-  @property() private _unitSystem!: ConfigUpdateValues["unit_system"];
+  @internalProperty() private _unitSystem!: ConfigUpdateValues["unit_system"];
 
-  @property() private _timeZone!: string;
+  @internalProperty() private _timeZone!: string;
 
   protected render(): TemplateResult {
     return html`

src/onboarding/onboarding-create-user.ts

@@ -8,6 +8,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -22,17 +23,17 @@ class OnboardingCreateUser extends LitElement {
 
   @property() public language!: string;
 
-  @property() private _name = "";
+  @internalProperty() private _name = "";
 
-  @property() private _username = "";
+  @internalProperty() private _username = "";
 
-  @property() private _password = "";
+  @internalProperty() private _password = "";
 
-  @property() private _passwordConfirm = "";
+  @internalProperty() private _passwordConfirm = "";
 
-  @property() private _loading = false;
+  @internalProperty() private _loading = false;
 
-  @property() private _errorMsg?: string = undefined;
+  @internalProperty() private _errorMsg?: string = undefined;
 
   protected render(): TemplateResult {
     return html`

src/onboarding/onboarding-integrations.ts

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -30,13 +31,13 @@ import "./integration-badge";
 
 @customElement("onboarding-integrations")
 class OnboardingIntegrations extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public onboardingLocalize!: LocalizeFunc;
 
-  @property() private _entries?: ConfigEntry[];
+  @internalProperty() private _entries?: ConfigEntry[];
 
-  @property() private _discovered?: DataEntryFlowProgress[];
+  @internalProperty() private _discovered?: DataEntryFlowProgress[];
 
   private _unsubEvents?: () => void;
 

src/panels/calendar/ha-full-calendar.ts

@@ -1,5 +1,6 @@
 import {
   property,
+  internalProperty,
   PropertyValues,
   LitElement,
   CSSResult,
@@ -56,9 +57,9 @@ class HAFullCalendar extends LitElement {
   @property({ type: Boolean, reflect: true })
   public narrow!: boolean;
 
-  @property() private calendar?: Calendar;
+  @internalProperty() private calendar?: Calendar;
 
-  @property() private _activeView = "dayGridMonth";
+  @internalProperty() private _activeView = "dayGridMonth";
 
   protected render(): TemplateResult {
     return html`

src/panels/calendar/ha-panel-calendar.ts

@@ -2,6 +2,7 @@ import {
   customElement,
   LitElement,
   property,
+  internalProperty,
   CSSResultArray,
   css,
   TemplateResult,
@@ -33,14 +34,14 @@ import { getCalendars, fetchCalendarEvents } from "../../data/calendar";
 
 @customElement("ha-panel-calendar")
 class PanelCalendar extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, reflect: true })
   public narrow!: boolean;
 
-  @property() private _calendars: SelectedCalendar[] = [];
+  @internalProperty() private _calendars: SelectedCalendar[] = [];
 
-  @property() private _events: CalendarEvent[] = [];
+  @internalProperty() private _events: CalendarEvent[] = [];
 
   private _start?: Date;
 

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -7,6 +7,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../../components/dialog/ha-paper-dialog";
@@ -17,15 +18,15 @@ import { HomeAssistant } from "../../../types";
 import { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";
 
 class DialogAreaDetail extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _name!: string;
+  @internalProperty() private _name!: string;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _params?: AreaRegistryDetailDialogParams;
+  @internalProperty() private _params?: AreaRegistryDetailDialogParams;
 
-  @property() private _submitting?: boolean;
+  @internalProperty() private _submitting?: boolean;
 
   public async showDialog(
     params: AreaRegistryDetailDialogParams

src/panels/config/areas/ha-config-area-page.ts

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
@@ -35,7 +36,7 @@ import {
 
 @customElement("ha-config-area-page")
 class HaConfigAreaPage extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public areaId!: string;
 
@@ -51,7 +52,7 @@ class HaConfigAreaPage extends LitElement {
 
   @property() public route!: Route;
 
-  @property() private _related?: RelatedResult;
+  @internalProperty() private _related?: RelatedResult;
 
   private _area = memoizeOne((areaId: string, areas: AreaRegistryEntry[]):
     | AreaRegistryEntry

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -42,7 +42,7 @@ import { computeRTL } from "../../../common/util/compute_rtl";
 
 @customElement("ha-config-areas-dashboard")
 export class HaConfigAreasDashboard extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public isWide?: boolean;