diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template
index efd18b224f..a9decd4502 100644
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -1,5 +1,5 @@
-
+
diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index bf8feb2685..48567ccd3e 100644
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -123,6 +123,13 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
}
}
+ protected updated(changedProps: PropertyValues) {
+ super.updated(changedProps);
+ if (changedProps.has("language")) {
+ document.querySelector("html")!.setAttribute("lang", this.language!);
+ }
+ }
+
private async _fetchAuthProviders() {
// Fetch auth providers
try {
diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template
index 9b057978f9..719a014799 100644
--- a/src/html/authorize.html.template
+++ b/src/html/authorize.html.template
@@ -1,5 +1,5 @@
-
+
Home Assistant
diff --git a/src/html/index.html.template b/src/html/index.html.template
index de55383946..befab71586 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -1,5 +1,5 @@
-
+
-
+
Home Assistant
diff --git a/src/mixins/lit-localize-lite-mixin.ts b/src/mixins/lit-localize-lite-mixin.ts
index c99d32c5a8..60d8f192af 100644
--- a/src/mixins/lit-localize-lite-mixin.ts
+++ b/src/mixins/lit-localize-lite-mixin.ts
@@ -19,23 +19,24 @@ export const litLocalizeLiteMixin = >(
public connectedCallback(): void {
super.connectedCallback();
this._initializeLocalizeLite();
- this.localize = computeLocalize(
- this.constructor.prototype,
- this.language!,
- this.resources!
- );
}
protected updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
+ if (changedProperties.get("translationFragment")) {
+ this._initializeLocalizeLite();
+ }
+
if (
- changedProperties.has("language") ||
- changedProperties.has("resources")
+ this.language &&
+ this.resources &&
+ (changedProperties.has("language") ||
+ changedProperties.has("resources"))
) {
this.localize = computeLocalize(
this.constructor.prototype,
- this.language!,
- this.resources!
+ this.language,
+ this.resources
);
}
}
diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts
index 9fa2cb8d75..3781e724ca 100644
--- a/src/onboarding/ha-onboarding.ts
+++ b/src/onboarding/ha-onboarding.ts
@@ -95,6 +95,13 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
this.addEventListener("onboarding-step", (ev) => this._handleStepDone(ev));
}
+ protected updated(changedProps: PropertyValues) {
+ super.updated(changedProps);
+ if (changedProps.has("language")) {
+ document.querySelector("html")!.setAttribute("lang", this.language!);
+ }
+ }
+
private _curStep() {
return this._steps ? this._steps.find((stp) => !stp.done) : undefined;
}
diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts
index da7c3f2f3f..1ab6bc4805 100644
--- a/src/state/translations-mixin.ts
+++ b/src/state/translations-mixin.ts
@@ -68,11 +68,11 @@ export default >(superClass: T) =>
if (saveToBackend) {
saveTranslationPreferences(this.hass, { language });
}
-
this._applyTranslations(this.hass);
}
private _applyTranslations(hass: HomeAssistant) {
+ document.querySelector("html")!.setAttribute("lang", hass.language);
this.style.direction = computeRTL(hass) ? "rtl" : "ltr";
this._loadCoreTranslations(hass.language);
this._loadHassTranslations(hass.language);