diff --git a/authentik/core/templates/base/skeleton.html b/authentik/core/templates/base/skeleton.html
index 8e4e20ce5..125b531a3 100644
--- a/authentik/core/templates/base/skeleton.html
+++ b/authentik/core/templates/base/skeleton.html
@@ -15,6 +15,8 @@
         <link rel="stylesheet" type="text/css" href="{% static 'dist/empty-state.css' %}?v={{ ak_version }}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/spinner.css' %}?v={{ ak_version }}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}?v={{ ak_version }}">
+        {% block head_before %}
+        {% endblock %}
         <script src="{% static 'dist/poly.js' %}?v={{ ak_version }}" type="module"></script>
         <script>window["polymerSkipLoadingFontRoboto"] = true;</script>
         {% block head %}
diff --git a/authentik/core/templates/if/flow.html b/authentik/core/templates/if/flow.html
index 2156e8e9f..191be97ad 100644
--- a/authentik/core/templates/if/flow.html
+++ b/authentik/core/templates/if/flow.html
@@ -3,6 +3,10 @@
 {% load static %}
 {% load i18n %}
 
+{% block head_before %}
+<script>ShadyDOM = { force: true };</script>
+{% endblock %}
+
 {% block head %}
 <script src="{% static 'dist/FlowInterface.js' %}?v={{ ak_version }}" type="module"></script>
 {% endblock %}
diff --git a/web/package-lock.json b/web/package-lock.json
index 54017ddd0..410cbb9cc 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -2303,6 +2303,11 @@
             "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.10.2.tgz",
             "integrity": "sha512-9Iseu8bRtecb0klvv+WXZOVZatsRkbaH7M97Z+f+Pt909R4lDfgUODAnra23DOZTpeMTAkVpf4m/FZztN7Ox1A=="
         },
+        "@webcomponents/webcomponentsjs": {
+            "version": "2.5.0",
+            "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.5.0.tgz",
+            "integrity": "sha512-C0l51MWQZ9kLzcxOZtniOMohpIFdCLZum7/TEHv3XWFc1Fvt5HCpbSX84x8ltka/JuNKcuiDnxXFkiB2gaePcg=="
+        },
         "acorn": {
             "version": "7.4.1",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
diff --git a/web/package.json b/web/package.json
index f75c35cd8..79b59054c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -57,6 +57,7 @@
         "@types/grecaptcha": "^3.0.1",
         "@typescript-eslint/eslint-plugin": "^4.22.0",
         "@typescript-eslint/parser": "^4.22.0",
+        "@webcomponents/webcomponentsjs": "^2.5.0",
         "authentik-api": "file:api",
         "babel-plugin-macros": "^3.0.1",
         "base64-js": "^1.5.1",
diff --git a/web/poly.ts b/web/poly.ts
new file mode 100644
index 000000000..510032fcc
--- /dev/null
+++ b/web/poly.ts
@@ -0,0 +1,2 @@
+import "construct-style-sheets-polyfill";
+import "@webcomponents/webcomponentsjs";
diff --git a/web/rollup.config.js b/web/rollup.config.js
index c761f2bc9..001108d40 100644
--- a/web/rollup.config.js
+++ b/web/rollup.config.js
@@ -76,9 +76,7 @@ export default [
     },
     // Polyfills (imported first)
     {
-        input: [
-            "construct-style-sheets-polyfill"
-        ],
+        input: "./poly.ts",
         output: [
             {
                 format: "iife",
diff --git a/web/src/interfaces/flow/index.html b/web/src/interfaces/flow/index.html
index 92121cbec..c990acb83 100644
--- a/web/src/interfaces/flow/index.html
+++ b/web/src/interfaces/flow/index.html
@@ -10,6 +10,7 @@
         <link rel="stylesheet" type="text/css" href="/static/dist/empty-state.css">
         <link rel="stylesheet" type="text/css" href="/static/dist/spinner.css">
         <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css">
+        <script>ShadyDOM = { force: true };</script>
         <script src="/static/dist/poly.js" type="module"></script>
         <script>window["polymerSkipLoadingFontRoboto"] = true;</script>
         <script src="/static/dist/FlowInterface.js" type="module"></script>