From 40664997e1bcc9c99913d5bd8073f5bd191b8833 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 6 Sep 2021 11:48:08 +0200
Subject: [PATCH] Use polyfill from toggleAttribute (#9969)

---
 src/components/trace/hat-trace-timeline.ts                  | 3 ++-
 src/panels/lovelace/cards/hui-grid-card.ts                  | 6 +++++-
 .../lovelace/components/hui-energy-period-selector.ts       | 3 ++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/trace/hat-trace-timeline.ts b/src/components/trace/hat-trace-timeline.ts
index 64a0e07cfb..0ff605400d 100644
--- a/src/components/trace/hat-trace-timeline.ts
+++ b/src/components/trace/hat-trace-timeline.ts
@@ -19,6 +19,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import relativeTime from "../../common/datetime/relative_time";
 import { fireEvent } from "../../common/dom/fire_event";
+import { toggleAttribute } from "../../common/dom/toggle_attribute";
 import { LogbookEntry } from "../../data/logbook";
 import {
   ChooseAction,
@@ -552,7 +553,7 @@ export class HaAutomationTracer extends LitElement {
       this.shadowRoot!.querySelectorAll<HaTimeline>(
         "ha-timeline[data-path]"
       ).forEach((el) => {
-        el.toggleAttribute("selected", this.selectedPath === el.dataset.path);
+        toggleAttribute(el, "selected", this.selectedPath === el.dataset.path);
         if (!this.allowPick || el.tabIndex === 0) {
           return;
         }
diff --git a/src/panels/lovelace/cards/hui-grid-card.ts b/src/panels/lovelace/cards/hui-grid-card.ts
index 05d1836a71..02a871f4ea 100644
--- a/src/panels/lovelace/cards/hui-grid-card.ts
+++ b/src/panels/lovelace/cards/hui-grid-card.ts
@@ -61,7 +61,11 @@ class HuiGridCard extends HuiStackCard<GridCardConfig> {
   setConfig(config: GridCardConfig) {
     super.setConfig(config);
     this.style.setProperty("--grid-card-column-count", String(this.columns));
-    this.toggleAttribute("square", this.square);
+    if (this.square) {
+      this.setAttribute("square", "");
+    } else {
+      this.removeAttribute("square");
+    }
   }
 
   static get styles(): CSSResultGroup {
diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts
index 5af6eca46e..d2515d7dd9 100644
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@@ -33,6 +33,7 @@ import "@material/mwc-icon-button/mwc-icon-button";
 import "../../../components/ha-svg-icon";
 import "@material/mwc-button/mwc-button";
 import "../../../components/ha-button-toggle-group";
+import { toggleAttribute } from "../../../common/dom/toggle_attribute";
 
 const viewButtons: ToggleButton[] = [
   { label: "Day", value: "day" },
@@ -55,7 +56,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
 
   public connectedCallback() {
     super.connectedCallback();
-    this.toggleAttribute("narrow", this.offsetWidth < 600);
+    toggleAttribute(this, "narrow", this.offsetWidth < 600);
   }
 
   public hassSubscribe(): UnsubscribeFunc[] {