diff --git a/src/common/util/compute_rtl.ts b/src/common/util/compute_rtl.ts
index 7e71b1b15b..39719bee43 100644
--- a/src/common/util/compute_rtl.ts
+++ b/src/common/util/compute_rtl.ts
@@ -23,6 +23,7 @@ export function computeDirectionStyles(isRTL: boolean, element: LitElement) {
 }
 
 export function setDirectionStyles(direction: string, element: LitElement) {
+  document.dir = direction;
   element.style.direction = direction;
   element.style.setProperty("--direction", direction);
   element.style.setProperty(
diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts
index 66b86a140a..db00f9c3c7 100644
--- a/src/state/translations-mixin.ts
+++ b/src/state/translations-mixin.ts
@@ -268,7 +268,6 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
 
     private _applyDirection(hass: HomeAssistant) {
       const direction = computeRTLDirection(hass);
-      document.dir = direction;
       setDirectionStyles(direction, this);
     }