fix(runtime): re-attach removed style elements (#6637)

When an external framework (e.g. SvelteKit's head management) removes
Stencil-injected `<style>` elements from the DOM, Stencil's in-memory
cache (`rootAppliedStyles`) still considers them applied and never
re-inserts them.

Fix: change `rootAppliedStyles` from `Set<string>` to
`Map<string, HTMLStyleElement | null>` to track both "applied" status
and the DOM element reference. Before treating a scopeId as applied,
verify the tracked element is still connected via `isConnected`. If the
element was removed, clear the stale entry and re-create the style.

For shadow roots using a shared `<style>` container (no constructable
stylesheets), track the container via a companion WeakMap and re-insert
the same element if removed, preserving all merged styles.

Constructable stylesheets are tracked as `null` since they are immune
to external DOM removal.

Closes #6637

Author: saudademjj

src/declarations/stencil-private.ts

@@ -1927,7 +1927,9 @@ export interface PlatformRuntime {
 
 export type StyleMap = Map<string, CSSStyleSheet | string>;
 
-export type RootAppliedStyleMap = WeakMap<Element, Set<string>>;
+export type RootAppliedStyleContainer = Element | ShadowRoot | Document;
+
+export type RootAppliedStyleMap = WeakMap<RootAppliedStyleContainer, Map<string, HTMLStyleElement | null>>;
 
 export interface ScreenshotConnector {
   initBuild(opts: ScreenshotConnectorOptions): Promise<void>;

src/runtime/disconnected-callback.ts

@@ -3,7 +3,7 @@ import { getHostRef, plt } from '@platform';
 
 import type * as d from '../declarations';
 import { PLATFORM_FLAGS } from './runtime-constants';
-import { rootAppliedStyles } from './styles';
+import { rootAppliedSharedStyleContainers, rootAppliedStyles } from './styles';
 import { safeCall } from './update-component';
 
 const disconnectInstance = (instance: any, elm?: d.HostElement) => {
@@ -32,17 +32,18 @@ export const disconnectedCallback = async (elm: d.HostElement) => {
     }
   }
 
-  /**
-   * Remove the element from the `rootAppliedStyles` WeakMap
-   */
-  if (rootAppliedStyles.has(elm)) {
-    rootAppliedStyles.delete(elm);
-  }
+  const { shadowRoot } = elm;
 
   /**
-   * Remove the shadow root from the `rootAppliedStyles` WeakMap
+   * Clean up style tracking for the disconnected element.
+   * Note: we intentionally do NOT clear `rootAppliedStyles` for the shadow root
+   * here — doing so would lose the tracked element references, causing duplicate
+   * `<style>` elements if the component reconnects. The WeakMap keys are
+   * automatically garbage collected when the container element is destroyed.
+   * We only clear shared style containers so they get fresh tracking on reconnect.
    */
-  if (elm.shadowRoot && rootAppliedStyles.has(elm.shadowRoot as unknown as Element)) {
-    rootAppliedStyles.delete(elm.shadowRoot as unknown as Element);
+  rootAppliedStyles.delete(elm);
+  if (shadowRoot) {
+    rootAppliedSharedStyleContainers.delete(shadowRoot);
   }
 };

src/runtime/styles.ts

@@ -15,8 +15,51 @@ import { queryNonceMetaTagContent } from '../utils/query-nonce-meta-tag-content'
 import { createTime } from './profile';
 import { HYDRATED_STYLE_ID, NODE_TYPE, SLOT_FB_CSS } from './runtime-constants';
 
+/**
+ * Tracks which style scopeIds have been applied to each container, along with
+ * a reference to the associated `<style>` DOM element (or `null` for styles
+ * applied via constructable stylesheets, which are immune to external removal).
+ *
+ * Using a `Map<string, HTMLStyleElement | null>` instead of a plain `Set<string>`
+ * lets us verify that a tracked `<style>` element is still in the DOM before
+ * treating it as "applied". This fixes the issue where an external framework
+ * (e.g. SvelteKit's head management) removes Stencil's `<style>` elements but
+ * the in-memory cache still considers them applied.
+ */
 export const rootAppliedStyles: d.RootAppliedStyleMap = /*@__PURE__*/ new WeakMap();
 
+/**
+ * Tracks shared `<style>` containers in shadow roots for the fallback case
+ * where constructable stylesheets are not supported and multiple scoped
+ * components merge their styles into a single `<style>` element.
+ *
+ * This is a separate WeakMap because the mapping is per-shadow-root (not
+ * per-scopeId) and the shared container needs to be re-inserted as a whole
+ * if removed externally, preserving all merged styles.
+ */
+export const rootAppliedSharedStyleContainers: WeakMap<ShadowRoot, HTMLStyleElement> = /*@__PURE__*/ new WeakMap();
+
+type ConstructableStylesheetWindow = Pick<typeof globalThis, 'CSSStyleSheet'>;
+
+/**
+ * Build the full style text for a component, including slot fallback CSS
+ * (`slot-fb{display:contents}`) when the component uses slot relocation.
+ */
+const getStyleText = (cmpMeta: d.ComponentRuntimeMeta, style: string) =>
+  cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation ? style + SLOT_FB_CSS : style;
+
+/**
+ * Create a constructable stylesheet scoped to a shadow root's window context.
+ * Falls back to the platform window if the owner document has no `defaultView`
+ * (e.g. detached documents).
+ */
+export const createShadowRootConstructableStylesheet = (shadowRoot: ShadowRoot, styleText: string) => {
+  const currentWindow = (shadowRoot.ownerDocument.defaultView ?? win) as unknown as ConstructableStylesheetWindow;
+  const stylesheet = new currentWindow.CSSStyleSheet();
+  stylesheet.replaceSync(styleText);
+  return stylesheet;
+};
+
 /**
  * Register the styles for a component by creating a stylesheet and then
  * registering it under the component's scope ID in a `WeakMap` for later use.
@@ -69,26 +112,61 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
 
   if (style) {
     if (typeof style === 'string') {
-      styleContainerNode = styleContainerNode.head || (styleContainerNode as HTMLElement);
-      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-      let styleElm;
+      const styleText = getStyleText(cmpMeta, style);
+      const appliedStyleContainer = (styleContainerNode.head || styleContainerNode) as Element | ShadowRoot;
+      let appliedStyles = rootAppliedStyles.get(appliedStyleContainer);
+
       if (!appliedStyles) {
-        rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
+        rootAppliedStyles.set(appliedStyleContainer, (appliedStyles = new Map()));
+      }
+
+      // Check if this scopeId has a tracked style element that is still
+      // in its expected container. Using parentNode instead of isConnected
+      // because the element may be in a shadow root whose host is not yet
+      // connected to the document (e.g. during initial render).
+      const trackedElm = appliedStyles.get(scopeId);
+      if (trackedElm !== undefined) {
+        if (trackedElm === null) {
+          // Applied via constructable stylesheet — immune to external DOM removal
+          return scopeId;
+        }
+        if (trackedElm.parentNode === appliedStyleContainer) {
+          // Style element is still in the expected container — update content during HMR only
+          if (BUILD.hotModuleReplacement && trackedElm.textContent !== styleText) {
+            trackedElm.textContent = styleText;
+          }
+          return scopeId;
+        }
+        // Style element was removed from the DOM by an external framework
+        // (e.g. SvelteKit head management). Remove stale tracking so we re-apply.
+        appliedStyles.delete(scopeId);
       }
 
-      // Check if style element already exists (for HMR updates)
-      // For shadow DOM components, directly update their dedicated style element
-      // For scoped components, check if they have their own HMR-created style element
-      const existingStyleElm: HTMLStyleElement =
-        (BUILD.hydrateClientSide || BUILD.hotModuleReplacement) &&
-        styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`);
+      // For shadow roots without constructable stylesheets, check if a shared
+      // style container was removed and needs to be re-inserted
+      if ('host' in appliedStyleContainer) {
+        const sharedContainer = rootAppliedSharedStyleContainers.get(appliedStyleContainer as ShadowRoot);
+        if (sharedContainer && sharedContainer.parentNode !== appliedStyleContainer) {
+          appliedStyleContainer.insertBefore(sharedContainer, appliedStyleContainer.firstChild);
+          appliedStyles.set(scopeId, sharedContainer);
+          return scopeId;
+        }
+      }
+
+      // Check for existing hydrated or HMR style element already in the DOM
+      const existingStyleElm =
+        (((BUILD.hydrateClientSide || BUILD.hotModuleReplacement) &&
+          appliedStyleContainer.querySelector<HTMLStyleElement>(`[${HYDRATED_STYLE_ID}="${scopeId}"]`)) ||
+          undefined);
 
       if (existingStyleElm) {
         // Update existing style element (for hydration or HMR)
-        existingStyleElm.textContent = style;
-      } else if (!appliedStyles.has(scopeId)) {
-        styleElm = win.document.createElement('style');
-        styleElm.textContent = style;
+        existingStyleElm.textContent = styleText;
+        appliedStyles.set(scopeId, existingStyleElm);
+      } else {
+        const styleElm = win.document.createElement('style');
+        styleElm.textContent = styleText;
+        let trackedStyleElm: HTMLStyleElement | null = styleElm;
 
         // Apply CSP nonce to the style tag if it exists
         const nonce = plt.$nonce$ ?? queryNonceMetaTagContent(win.document);
@@ -109,21 +187,21 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
          * attach styles at the end of the head tag if we render scoped components
          */
         if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
-          if (styleContainerNode.nodeName === 'HEAD') {
+          if (appliedStyleContainer.nodeName === 'HEAD') {
             /**
              * if the page contains preconnect links, we want to insert the styles
              * after the last preconnect link to ensure the styles are preloaded
              */
-            const preconnectLinks = styleContainerNode.querySelectorAll('link[rel=preconnect]');
+            const preconnectLinks = appliedStyleContainer.querySelectorAll('link[rel=preconnect]');
             const referenceNode =
               preconnectLinks.length > 0
                 ? preconnectLinks[preconnectLinks.length - 1].nextSibling
-                : styleContainerNode.querySelector('style');
-            (styleContainerNode as HTMLElement).insertBefore(
+                : appliedStyleContainer.querySelector('style');
+            (appliedStyleContainer as HTMLElement).insertBefore(
               styleElm,
-              referenceNode?.parentNode === styleContainerNode ? referenceNode : null,
+              referenceNode?.parentNode === appliedStyleContainer ? referenceNode : null,
             );
-          } else if ('host' in styleContainerNode) {
+          } else if ('host' in appliedStyleContainer) {
             if (supportsConstructableStylesheets) {
               /**
                * If a scoped component is used within a shadow root then turn the styles into a
@@ -135,19 +213,22 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
                * Note: constructable stylesheets can't be shared between windows,
                * we need to create a new one for the current window if necessary
                */
-              const currentWindow = styleContainerNode.defaultView ?? styleContainerNode.ownerDocument.defaultView;
-              const stylesheet = new currentWindow.CSSStyleSheet();
-              stylesheet.replaceSync(style);
+              const stylesheet = createShadowRootConstructableStylesheet(
+                appliedStyleContainer as ShadowRoot,
+                styleText,
+              );
 
               /**
                * > If the array needs to be modified, use in-place mutations like push().
                * https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
                */
               if (supportsMutableAdoptedStyleSheets) {
-                styleContainerNode.adoptedStyleSheets.unshift(stylesheet);
+                appliedStyleContainer.adoptedStyleSheets.unshift(stylesheet);
               } else {
-                styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
+                appliedStyleContainer.adoptedStyleSheets = [stylesheet, ...appliedStyleContainer.adoptedStyleSheets];
               }
+
+              trackedStyleElm = null;
             } else {
               /**
                * If a scoped component is used within a shadow root and constructable stylesheets are
@@ -162,38 +243,34 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
                * During HMR, create separate style elements for scoped components so they can be
                * updated independently without affecting other components' styles.
                */
-              const existingStyleContainer: HTMLStyleElement = styleContainerNode.querySelector('style');
+              const existingStyleContainer = appliedStyleContainer.querySelector<HTMLStyleElement>('style');
               if (existingStyleContainer && !BUILD.hotModuleReplacement) {
-                existingStyleContainer.textContent = style + existingStyleContainer.textContent;
+                existingStyleContainer.textContent = styleText + existingStyleContainer.textContent;
+                existingStyleContainer.removeAttribute(HYDRATED_STYLE_ID);
+                rootAppliedSharedStyleContainers.set(appliedStyleContainer as ShadowRoot, existingStyleContainer);
+                trackedStyleElm = existingStyleContainer;
               } else {
-                (styleContainerNode as HTMLElement).prepend(styleElm);
+                appliedStyleContainer.insertBefore(styleElm, appliedStyleContainer.firstChild);
               }
             }
           } else {
-            styleContainerNode.append(styleElm);
+            appliedStyleContainer.append(styleElm);
           }
         }
 
         /**
          * attach styles at the beginning of a shadow root node if we render shadow components
          */
         if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) {
-          styleContainerNode.insertBefore(styleElm, null);
+          appliedStyleContainer.insertBefore(styleElm, null);
         }
 
-        // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
-        if (cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation) {
-          styleElm.textContent += SLOT_FB_CSS;
-        }
-
-        if (appliedStyles) {
-          appliedStyles.add(scopeId);
-        }
+        appliedStyles.set(scopeId, trackedStyleElm);
       }
     } else if (BUILD.constructableCSS) {
       let appliedStyles = rootAppliedStyles.get(styleContainerNode);
       if (!appliedStyles) {
-        rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
+        rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Map()));
       }
       if (!appliedStyles.has(scopeId)) {
         /**
@@ -220,12 +297,13 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
           styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, stylesheet];
         }
 
-        appliedStyles.add(scopeId);
+        appliedStyles.set(scopeId, null);
 
         // Remove SSR style element from shadow root now that adoptedStyleSheets is in use
         // Only remove from shadow roots, not from document head (for scoped components)
         if (BUILD.hydrateClientSide && 'host' in styleContainerNode) {
-          const ssrStyleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`);
+          const shadowRoot = styleContainerNode as ShadowRoot;
+          const ssrStyleElm = shadowRoot.querySelector<HTMLStyleElement>(`[${HYDRATED_STYLE_ID}="${scopeId}"]`);
           if (ssrStyleElm) {
             writeTask(() => ssrStyleElm.remove());
           }