Polyfill ElementInternals for material-web components. Fix #18600 (#18638)

package.json

@@ -111,6 +111,7 @@
     "date-fns-tz": "2.0.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
+    "element-internals-polyfill": "1.3.9",
     "fuse.js": "7.0.0",
     "google-timezones-json": "1.2.0",
     "hls.js": "1.4.12",

src/components/chips/ha-assist-chip.ts

@@ -1,3 +1,4 @@
+import "element-internals-polyfill";
 import { MdAssistChip } from "@material/web/chips/assist-chip";
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators";

src/components/chips/ha-chip-set.ts

@@ -1,3 +1,4 @@
+import "element-internals-polyfill";
 import { MdChipSet } from "@material/web/chips/chip-set";
 import { customElement } from "lit/decorators";
 

src/components/chips/ha-filter-chip.ts

@@ -1,3 +1,4 @@
+import "element-internals-polyfill";
 import { MdFilterChip } from "@material/web/chips/filter-chip";
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators";

src/components/chips/ha-input-chip.ts

@@ -1,3 +1,4 @@
+import "element-internals-polyfill";
 import { MdInputChip } from "@material/web/chips/input-chip";
 import { css } from "lit";
 import { customElement } from "lit/decorators";

src/components/ha-outlined-button.ts

@@ -1,5 +1,6 @@
 import { css } from "lit";
 import { customElement } from "lit/decorators";
+import "element-internals-polyfill";
 import { MdOutlinedButton } from "@material/web/button/outlined-button";
 
 @customElement("ha-outlined-button")

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

@@ -1,5 +1,6 @@
 import { css } from "lit";
 import { customElement } from "lit/decorators";
+import "element-internals-polyfill";
 import { MdOutlinedIconButton } from "@material/web/iconbutton/outlined-icon-button";
 
 @customElement("ha-outlined-icon-button")

src/components/ha-slider.ts

@@ -1,4 +1,5 @@
 import { customElement } from "lit/decorators";
+import "element-internals-polyfill";
 import { MdSlider } from "@material/web/slider/slider";
 import { CSSResult, css } from "lit";
 

yarn.lock

@@ -7633,6 +7633,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"element-internals-polyfill@npm:1.3.9":
+  version: 1.3.9
+  resolution: "element-internals-polyfill@npm:1.3.9"
+  checksum: bd9b63e68ca3462ed7623758398d5b8016736438b02be4527e456711bb91afe93af60028ddb928e12f0f1975c958c7b439d4b31a1ec41f4737969cd0202bcced
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^10.2.1":
   version: 10.3.0
   resolution: "emoji-regex@npm:10.3.0"
@@ -9732,6 +9739,7 @@ __metadata:
     deep-clone-simple: "npm:1.1.1"
     deep-freeze: "npm:0.0.1"
     del: "npm:7.1.0"
+    element-internals-polyfill: "npm:1.3.9"
     eslint: "npm:8.53.0"
     eslint-config-airbnb-base: "npm:15.0.0"
     eslint-config-airbnb-typescript: "npm:17.1.0"