web: fix Brand CSS not applied to nested Shadow DOM components (cherry-pick #19892 to version-2025.12) (#19900)

web: fix Brand CSS not applied to nested Shadow DOM components (#19892)

* web: fix Brand CSS not applied to nested Shadow DOM components

After PR #17444, Brand CSS was only applied when ThemeChangeEvent fired.
Components created after the initial event never received the custom styles.

This fix immediately applies Brand CSS when a style root is set, ensuring
all nested Shadow DOM components (like flow stages) receive brand styling
regardless of when they are created.

* Update web/src/elements/Base.ts



* Clarify.

---------

Signed-off-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Co-authored-by: Mmx233 <36563672+Mmx233@users.noreply.github.com>
Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>

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) {