diff --git a/web/src/elements/Base.ts b/web/src/elements/Base.ts
index 1c6d7d1639..a7b20bfaa9 100644
--- a/web/src/elements/Base.ts
+++ b/web/src/elements/Base.ts
@@ -129,6 +129,13 @@ export class AKElement extends LitElement implements AKElementProps {
 
     /**
      * A custom CSS style sheet to apply to the element.
+     *
+     * @deprecated Use CSS parts and custom properties instead.
+     *
+     * @remarks
+     * The use of injected style sheets may result in brittle styles that are hard to
+     * maintain across authentik versions.
+     *
      */
     readonly #customCSSStyleSheet: CSSStyleSheet | null;
 
@@ -141,6 +148,13 @@ export class AKElement extends LitElement implements AKElementProps {
      */
     #styleRoot?: StyleRoot;
 
+    /**
+     * The style root to which the theme is applied.
+     */
+    protected get styleRoot(): StyleRoot | undefined {
+        return this.#styleRoot;
+    }
+
     protected set styleRoot(nextStyleRoot: StyleRoot | undefined) {
         this.#themeAbortController?.abort();
 
@@ -161,10 +175,10 @@ export class AKElement extends LitElement implements AKElementProps {
                 signal: this.#themeAbortController.signal,
             },
         );
-    }
 
-    protected get styleRoot(): StyleRoot | undefined {
-        return this.#styleRoot;
+        if (this.#customCSSStyleSheet) {
+            applyUITheme(nextStyleRoot, this.#customCSSStyleSheet);
+        }
     }
 
     protected hasSlotted(name: string | null) {