diff --git a/build-scripts/babel-plugins/custom-polyfill-plugin.js b/build-scripts/babel-plugins/custom-polyfill-plugin.js
index 83ce9235f7..ce53fa522b 100644
--- a/build-scripts/babel-plugins/custom-polyfill-plugin.js
+++ b/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;
       },
     };
   }
diff --git a/build-scripts/bundle.cjs b/build-scripts/bundle.cjs
index e0503a7a73..ce07a61281 100644
--- a/build-scripts/bundle.cjs
+++ b/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
diff --git a/src/components/chips/ha-assist-chip.ts b/src/components/chips/ha-assist-chip.ts
index a284818fd4..7f621f01fb 100644
--- a/src/components/chips/ha-assist-chip.ts
+++ b/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";
diff --git a/src/components/chips/ha-chip-set.ts b/src/components/chips/ha-chip-set.ts
index dde49a3f71..e82b49eeaf 100644
--- a/src/components/chips/ha-chip-set.ts
+++ b/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";
 
diff --git a/src/components/chips/ha-filter-chip.ts b/src/components/chips/ha-filter-chip.ts
index 42917198d1..accd3c5f23 100644
--- a/src/components/chips/ha-filter-chip.ts
+++ b/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";
diff --git a/src/components/chips/ha-input-chip.ts b/src/components/chips/ha-input-chip.ts
index c48ecb1d22..df64089eb3 100644
--- a/src/components/chips/ha-input-chip.ts
+++ b/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";
diff --git a/src/components/ha-circular-progress.ts b/src/components/ha-circular-progress.ts
index 6d53057b92..8906934297 100644
--- a/src/components/ha-circular-progress.ts
+++ b/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";
diff --git a/src/components/ha-list-item-new.ts b/src/components/ha-list-item-new.ts
index 00af92be12..a3d317f82a 100644
--- a/src/components/ha-list-item-new.ts
+++ b/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 {
diff --git a/src/components/ha-list-new.ts b/src/components/ha-list-new.ts
index 56b2f193ab..9723269a48 100644
--- a/src/components/ha-list-new.ts
+++ b/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 {
diff --git a/src/components/ha-menu-item.ts b/src/components/ha-menu-item.ts
index 662800f1dd..b6b133c681 100644
--- a/src/components/ha-menu-item.ts
+++ b/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";
 
diff --git a/src/components/ha-menu.ts b/src/components/ha-menu.ts
index 885954ba46..06c2d5f91d 100644
--- a/src/components/ha-menu.ts
+++ b/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 {
diff --git a/src/components/ha-outlined-button.ts b/src/components/ha-outlined-button.ts
index 2b2812fdcc..d2489be100 100644
--- a/src/components/ha-outlined-button.ts
+++ b/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 {
diff --git a/src/components/ha-outlined-field.ts b/src/components/ha-outlined-field.ts
index c0df46cf29..890e9ac356 100644
--- a/src/components/ha-outlined-field.ts
+++ b/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";
diff --git a/src/components/ha-outlined-icon-button.ts b/src/components/ha-outlined-icon-button.ts
index eae1b0d560..0789fc4f99 100644
--- a/src/components/ha-outlined-icon-button.ts
+++ b/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 {
diff --git a/src/components/ha-outlined-text-field.ts b/src/components/ha-outlined-text-field.ts
index d1645b5dd7..757478d0b3 100644
--- a/src/components/ha-outlined-text-field.ts
+++ b/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";
diff --git a/src/components/ha-ripple.ts b/src/components/ha-ripple.ts
index 0fadf1a375..e5f9ba9f7d 100644
--- a/src/components/ha-ripple.ts
+++ b/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";
 
diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts
index 5c4d40d0b8..8bf5a098e5 100644
--- a/src/components/ha-slider.ts
+++ b/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")
diff --git a/src/components/ha-sub-menu.ts b/src/components/ha-sub-menu.ts
index 584d30dfa7..f6d89d90e8 100644
--- a/src/components/ha-sub-menu.ts
+++ b/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 {