diff --git a/build-scripts/bundle.cjs b/build-scripts/bundle.cjs
index ef59a29631..04529ef616 100644
--- a/build-scripts/bundle.cjs
+++ b/build-scripts/bundle.cjs
@@ -18,7 +18,7 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
+module.exports.emptyPackages = ({ isHassioBuild }) =>
   [
     // Contains all color definitions for all material color sets.
     // We don't use it
@@ -28,12 +28,6 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
     require.resolve("@polymer/font-roboto/roboto.js"),
     require.resolve("@vaadin/vaadin-material-styles/typography.js"),
     require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
-    // Compatibility not needed for latest builds
-    latestBuild &&
-      // wrapped in require.resolve so it blows up if file no longer exists
-      require.resolve(
-        path.resolve(paths.polymer_dir, "src/resources/compatibility.ts")
-      ),
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
       require.resolve(
diff --git a/build-scripts/gulp/gather-static.js b/build-scripts/gulp/gather-static.js
index 4cdbdc18c9..fc34e9f8eb 100644
--- a/build-scripts/gulp/gather-static.js
+++ b/build-scripts/gulp/gather-static.js
@@ -59,6 +59,11 @@ function copyPolyfills(staticDir) {
     npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
     staticPath("polyfills/")
   );
+  // Lit polyfill support
+  fs.copySync(
+    npmPath("lit/polyfill-support.js"),
+    path.join(staticPath("polyfills/"), "lit-polyfill-support.js")
+  );
 
   // dialog-polyfill css
   copyFileDir(
diff --git a/build-scripts/rspack.cjs b/build-scripts/rspack.cjs
index 9d53293cc3..0c7b264deb 100644
--- a/build-scripts/rspack.cjs
+++ b/build-scripts/rspack.cjs
@@ -155,9 +155,7 @@ const createRspackConfig = ({
         },
       }),
       new rspack.NormalModuleReplacementPlugin(
-        new RegExp(
-          bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
-        ),
+        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),
diff --git a/demo/src/ha-demo.ts b/demo/src/ha-demo.ts
index 560fef69c3..3406e0270d 100644
--- a/demo/src/ha-demo.ts
+++ b/demo/src/ha-demo.ts
@@ -1,5 +1,3 @@
-// Compat needs to be first import
-import "../../src/resources/compatibility";
 import { customElement } from "lit/decorators";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts
index eabfb7e5e5..4f4c1c9b0a 100644
--- a/hassio/src/entrypoint.ts
+++ b/hassio/src/entrypoint.ts
@@ -1,5 +1,3 @@
-// Compat needs to be first import
-import "../../src/resources/compatibility";
 import "./hassio-main";
 
 import("../../src/resources/ha-style");
diff --git a/src/common/feature-detect/support-web-components.ts b/src/common/feature-detect/support-web-components.ts
index 607b3713ca..8017d682ee 100644
--- a/src/common/feature-detect/support-web-components.ts
+++ b/src/common/feature-detect/support-web-components.ts
@@ -1,2 +1 @@
-export const webComponentsSupported =
-  "customElements" in window && "content" in document.createElement("template");
+export const webComponentsSupported = "attachShadow" in Element.prototype;
diff --git a/src/entrypoints/app.ts b/src/entrypoints/app.ts
index d47257c91a..21230d7cb6 100644
--- a/src/entrypoints/app.ts
+++ b/src/entrypoints/app.ts
@@ -1,5 +1,3 @@
-// Compat needs to be first import
-import "../resources/compatibility";
 import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min";
 import "../layouts/home-assistant";
 
diff --git a/src/entrypoints/authorize.ts b/src/entrypoints/authorize.ts
index 047e80be18..f52163a500 100644
--- a/src/entrypoints/authorize.ts
+++ b/src/entrypoints/authorize.ts
@@ -1,5 +1,3 @@
-// Compat needs to be first import
-import "../resources/compatibility";
 import "../auth/ha-authorize";
 
 import("../resources/ha-style");
diff --git a/src/entrypoints/custom-panel.ts b/src/entrypoints/custom-panel.ts
index 651627aba3..7e62974eef 100644
--- a/src/entrypoints/custom-panel.ts
+++ b/src/entrypoints/custom-panel.ts
@@ -1,6 +1,3 @@
-// Compat needs to be first import
-import "../resources/compatibility";
-
 import type { CSSResult } from "lit";
 import { fireEvent } from "../common/dom/fire_event";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
@@ -67,9 +64,10 @@ function initialize(
   let start: Promise<unknown> = Promise.resolve();
 
   if (!webComponentsSupported) {
-    start = start.then(() =>
-      loadJS(`${__STATIC_PATH__}polyfills/webcomponents-bundle.js`)
-    );
+    start = start.then(() => {
+      loadJS(`${__STATIC_PATH__}polyfills/webcomponents-bundle.js`);
+      loadJS(`${__STATIC_PATH__}polyfills/lit-polyfill-support.js`);
+    });
   }
 
   if (__BUILD__ === "legacy") {
diff --git a/src/entrypoints/onboarding.ts b/src/entrypoints/onboarding.ts
index 87539e965a..c2e4fc0bf7 100644
--- a/src/entrypoints/onboarding.ts
+++ b/src/entrypoints/onboarding.ts
@@ -1,5 +1,3 @@
-// Compat needs to be first import
-import "../resources/compatibility";
 import "../onboarding/ha-onboarding";
 
 import("../resources/ha-style");
diff --git a/src/html/_js_base.html.template b/src/html/_js_base.html.template
index aaa55cbfdc..23844407e6 100644
--- a/src/html/_js_base.html.template
+++ b/src/html/_js_base.html.template
@@ -8,13 +8,9 @@
     return document.head.appendChild(script);
   }
   window.polymerSkipLoadingFontRoboto = true;
-  if (
-    !(
-      "customElements" in window &&
-      "content" in document.createElement("template")
-    )
-  ) {
+  if (!("attachShadow" in Element.prototype)) {
     _ls("/static/polyfills/webcomponents-bundle.js", true);
+    _ls("/static/polyfills/lit-polyfill-support.js", true);
   }
   // Modern browsers are detected primarily using the user agent string.
   // A feature detection which roughly lines up with the modern targets is used
diff --git a/src/resources/compatibility.ts b/src/resources/compatibility.ts
deleted file mode 100644
index 8b86a81c0e..0000000000
--- a/src/resources/compatibility.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Caution before editing - For latest builds, this module is replaced with emptiness and thus not imported (see build-scripts/bundle.js)
-import "lit/polyfill-support";