Inject ElementInternals polyfill where needed (#20818)

build-scripts/babel-plugins/custom-polyfill-plugin.js

@@ -2,6 +2,18 @@ import defineProvider from "@babel/helper-define-polyfill-provider";
 
 // List of polyfill keys with supported browser targets for the functionality
 const PolyfillSupport = {
+  // Note states and shadowRoot properties should be supported.
+  "element-internals": {
+    android: 90,
+    chrome: 90,
+    edge: 90,
+    firefox: 126,
+    ios: 17.4,
+    opera: 76,
+    opera_mobile: 64,
+    safari: 17.4,
+    samsung: 15.0,
+  },
   fetch: {
     android: 42,
     chrome: 42,
@@ -33,7 +45,12 @@ const polyfillMap = {
     Proxy: { key: "proxy", module: "proxy-polyfill" },
     fetch: { key: "fetch", module: "unfetch/polyfill" },
   },
-  instance: {},
+  instance: {
+    attachInternals: {
+      key: "element-internals",
+      module: "element-internals-polyfill",
+    },
+  },
   static: {},
 };
 
@@ -49,7 +66,9 @@ export default defineProvider(
         if (polyfill && shouldInjectPolyfill(polyfill.desc.key)) {
           debug(polyfill.desc.key);
           utils.injectGlobalImport(polyfill.desc.module);
+          return true;
         }
+        return false;
       },
     };
   }

build-scripts/bundle.cjs

@@ -154,7 +154,12 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
           { method: "usage-global" },
         ],
       ],
-      exclude: /\/node_modules\/(?:unfetch|proxy-polyfill)\//,
+      exclude: [
+        "@webcomponents/scoped-custom-element-registry",
+        "element-internals-polyfill",
+        "proxy-polyfill",
+        "unfetch",
+      ].map((p) => new RegExp(`/node_modules/${p}/`)),
     },
     {
       // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files

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

@@ -1,4 +1,3 @@
-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,4 +1,3 @@
-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,4 +1,3 @@
-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,4 +1,3 @@
-import "element-internals-polyfill";
 import { MdInputChip } from "@material/web/chips/input-chip";
 import { css } from "lit";
 import { customElement } from "lit/decorators";

src/components/ha-circular-progress.ts

@@ -1,4 +1,3 @@
-import "element-internals-polyfill";
 import { MdCircularProgress } from "@material/web/progress/circular-progress";
 import { PropertyValues, css } from "lit";
 import { customElement, property } from "lit/decorators";

src/components/ha-list-item-new.ts

@@ -1,7 +1,6 @@
-import { customElement } from "lit/decorators";
-import "element-internals-polyfill";
 import { MdListItem } from "@material/web/list/list-item";
 import { css } from "lit";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-list-item-new")
 export class HaListItemNew extends MdListItem {

src/components/ha-list-new.ts

@@ -1,7 +1,6 @@
-import { customElement } from "lit/decorators";
-import "element-internals-polyfill";
 import { MdList } from "@material/web/list/list";
 import { css } from "lit";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-list-new")
 export class HaListNew extends MdList {

src/components/ha-menu-item.ts

@@ -1,5 +1,4 @@
 import { MdMenuItem } from "@material/web/menu/menu-item";
-import "element-internals-polyfill";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 

src/components/ha-menu.ts

@@ -1,7 +1,6 @@
-import { customElement } from "lit/decorators";
-import "element-internals-polyfill";
-import { css } from "lit";
 import { MdMenu } from "@material/web/menu/menu";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-menu")
 export class HaMenu extends MdMenu {

src/components/ha-outlined-button.ts

@@ -1,7 +1,6 @@
+import { MdOutlinedButton } from "@material/web/button/outlined-button";
 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")
 export class HaOutlinedButton extends MdOutlinedButton {

src/components/ha-outlined-field.ts

@@ -1,5 +1,4 @@
 import { MdOutlinedField } from "@material/web/field/outlined-field";
-import "element-internals-polyfill";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 import { literal } from "lit/static-html";

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

@@ -1,7 +1,6 @@
+import { MdOutlinedIconButton } from "@material/web/iconbutton/outlined-icon-button";
 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")
 export class HaOutlinedIconButton extends MdOutlinedIconButton {

src/components/ha-outlined-text-field.ts

@@ -1,5 +1,4 @@
 import { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field";
-import "element-internals-polyfill";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 import { literal } from "lit/static-html";

src/components/ha-ripple.ts

@@ -1,6 +1,5 @@
 import { AttachableController } from "@material/web/internal/controller/attachable-controller";
 import { MdRipple } from "@material/web/ripple/ripple";
-import "element-internals-polyfill";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 

src/components/ha-slider.ts

@@ -1,7 +1,6 @@
-import { customElement } from "lit/decorators";
-import "element-internals-polyfill";
 import { MdSlider } from "@material/web/slider/slider";
 import { css } from "lit";
+import { customElement } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
 
 @customElement("ha-slider")

src/components/ha-sub-menu.ts

@@ -1,7 +1,6 @@
-import { customElement } from "lit/decorators";
-import "element-internals-polyfill";
-import { css } from "lit";
 import { MdSubMenu } from "@material/web/menu/sub-menu";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-sub-menu")
 export class HaSubMenu extends MdSubMenu {