Do not use toggleAttribute (#3484)

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

@@ -29,6 +29,7 @@ import {
 } from "../../../../src/data/lovelace";
 import "./hc-layout";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
+import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
@@ -158,7 +159,8 @@ class HcCast extends LitElement {
 
   protected updated(changedProps) {
     super.updated(changedProps);
-    this.toggleAttribute(
+    toggleAttribute(
+      this,
       "hide-icons",
       this.lovelaceConfig
         ? !this.lovelaceConfig.views.some((view) => view.icon)

src/common/dom/toggle_attribute.ts

@@ -0,0 +1,25 @@
+// Toggle Attribute Polyfill because it's too new for some browsers
+export const toggleAttribute = (
+  el: HTMLElement,
+  name: string,
+  force?: boolean
+) => {
+  if (force !== undefined) {
+    force = !!force;
+  }
+
+  if (el.hasAttribute(name)) {
+    if (force) {
+      return true;
+    }
+
+    el.removeAttribute(name);
+    return false;
+  }
+  if (force === false) {
+    return false;
+  }
+
+  el.setAttribute(name, "");
+  return true;
+};

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

@@ -9,6 +9,7 @@ import {
 } from "lit-element";
 import { User } from "../../data/user";
 import { CurrentUser } from "../../types";
+import { toggleAttribute } from "../../common/dom/toggle_attribute";
 
 const computeInitials = (name: string) => {
   if (!name) {
@@ -40,7 +41,8 @@ class StateBadge extends LitElement {
 
   protected updated(changedProps) {
     super.updated(changedProps);
-    this.toggleAttribute(
+    toggleAttribute(
+      this,
       "long",
       (this.user ? computeInitials(this.user.name) : "?").length > 2
     );

src/layouts/home-assistant-main.ts

@@ -21,6 +21,7 @@ import { PolymerChangedEvent } from "../polymer-types";
 // tslint:disable-next-line: no-duplicate-imports
 import { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
+import { toggleAttribute } from "../common/dom/toggle_attribute";
 
 const NON_SWIPABLE_PANELS = ["kiosk", "map"];
 
@@ -114,7 +115,8 @@ class HomeAssistantMain extends LitElement {
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 
-    this.toggleAttribute(
+    toggleAttribute(
+      this,
       "expanded",
       this.narrow || this.hass.dockedSidebar !== "auto"
     );

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -17,6 +17,7 @@ import "../components/hui-warning";
 import { HomeAssistant } from "../../../types";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { EntitiesCardEntityConfig } from "../cards/types";
+import { toggleAttribute } from "../../../common/dom/toggle_attribute";
 
 class HuiGenericEntityRow extends LitElement {
   @property() public hass?: HomeAssistant;
@@ -80,7 +81,7 @@ class HuiGenericEntityRow extends LitElement {
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
     if (changedProps.has("hass")) {
-      this.toggleAttribute("rtl", computeRTL(this.hass!));
+      toggleAttribute(this, "rtl", computeRTL(this.hass!));
     }
   }