Skip to content

Commit 1cb91c6

Browse files
saudademjjsaudademjj
committed
fix(runtime): re-inject styles removed from DOM by external frameworks (#6637)
Track style elements in rootAppliedStyles Map and verify DOM presence before skipping re-injection. Frameworks like SvelteKit may remove Stencil-injected <style> elements from <head> during hydration. - Change RootAppliedStyleMap from Set<string> to Map<string, HTMLStyleElement | null> - Verify tracked element parentNode before treating style as applied - null value indicates constructable stylesheet (cannot be externally removed) - Add regression test for style re-attachment after removal
1 parent c845d46 commit 1cb91c6

3 files changed

Lines changed: 63 additions & 15 deletions

File tree

‎src/declarations/stencil-private.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1927,7 +1927,7 @@ export interface PlatformRuntime {
19271927

19281928
export type StyleMap = Map<string, CSSStyleSheet | string>;
19291929

1930-
export type RootAppliedStyleMap = WeakMap<Element, Set<string>>;
1930+
export type RootAppliedStyleMap = WeakMap<Element | ShadowRoot, Map<string, HTMLStyleElement | null>>;
19311931

19321932
export interface ScreenshotConnector {
19331933
initBuild(opts: ScreenshotConnectorOptions): Promise<void>;

‎src/runtime/styles.ts‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -73,22 +73,33 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
7373
let appliedStyles = rootAppliedStyles.get(styleContainerNode);
7474
let styleElm;
7575
if (!appliedStyles) {
76-
rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
76+
rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Map()));
7777
}
7878

79-
// Check if style element already exists (for HMR updates)
80-
// For shadow DOM components, directly update their dedicated style element
81-
// For scoped components, check if they have their own HMR-created style element
82-
const existingStyleElm: HTMLStyleElement =
83-
(BUILD.hydrateClientSide || BUILD.hotModuleReplacement) &&
84-
styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`);
79+
// Check if tracked element is still in the DOM (fixes #6637)
80+
const trackedElm = appliedStyles.get(scopeId);
81+
if (trackedElm !== undefined) {
82+
if (trackedElm === null || trackedElm.parentNode === styleContainerNode) {
83+
if (BUILD.hotModuleReplacement && trackedElm !== null && trackedElm.textContent !== style) {
84+
trackedElm.textContent = style;
85+
}
86+
return scopeId;
87+
}
88+
appliedStyles.delete(scopeId);
89+
}
90+
91+
const existingStyleElm: HTMLStyleElement | undefined =
92+
((BUILD.hydrateClientSide || BUILD.hotModuleReplacement) &&
93+
styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`)) ||
94+
undefined;
8595

8696
if (existingStyleElm) {
87-
// Update existing style element (for hydration or HMR)
8897
existingStyleElm.textContent = style;
89-
} else if (!appliedStyles.has(scopeId)) {
98+
appliedStyles.set(scopeId, existingStyleElm);
99+
} else {
90100
styleElm = win.document.createElement('style');
91101
styleElm.textContent = style;
102+
let appliedStyleElm: HTMLStyleElement | null = styleElm;
92103

93104
// Apply CSP nonce to the style tag if it exists
94105
const nonce = plt.$nonce$ ?? queryNonceMetaTagContent(win.document);
@@ -148,6 +159,7 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
148159
} else {
149160
styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
150161
}
162+
appliedStyleElm = null;
151163
} else {
152164
/**
153165
* If a scoped component is used within a shadow root and constructable stylesheets are
@@ -165,6 +177,7 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
165177
const existingStyleContainer: HTMLStyleElement = styleContainerNode.querySelector('style');
166178
if (existingStyleContainer && !BUILD.hotModuleReplacement) {
167179
existingStyleContainer.textContent = style + existingStyleContainer.textContent;
180+
appliedStyleElm = existingStyleContainer;
168181
} else {
169182
(styleContainerNode as HTMLElement).prepend(styleElm);
170183
}
@@ -186,14 +199,12 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
186199
styleElm.textContent += SLOT_FB_CSS;
187200
}
188201

189-
if (appliedStyles) {
190-
appliedStyles.add(scopeId);
191-
}
202+
appliedStyles.set(scopeId, appliedStyleElm);
192203
}
193204
} else if (BUILD.constructableCSS) {
194205
let appliedStyles = rootAppliedStyles.get(styleContainerNode);
195206
if (!appliedStyles) {
196-
rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
207+
rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Map()));
197208
}
198209
if (!appliedStyles.has(scopeId)) {
199210
/**
@@ -220,7 +231,7 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
220231
styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, stylesheet];
221232
}
222233

223-
appliedStyles.add(scopeId);
234+
appliedStyles.set(scopeId, null);
224235

225236
// Remove SSR style element from shadow root now that adoptedStyleSheets is in use
226237
// Only remove from shadow roots, not from document head (for scoped components)

‎src/runtime/test/style.spec.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,43 @@ describe('style', () => {
5656
);
5757
});
5858

59+
it('re-attaches a removed style element when the component is rendered again', async () => {
60+
@Component({
61+
tag: 'cmp-a',
62+
styles: `
63+
cmp-a {
64+
color: red;
65+
}
66+
`,
67+
})
68+
class CmpA {
69+
render() {
70+
return `innertext`;
71+
}
72+
}
73+
74+
const page = await newSpecPage({
75+
components: [CmpA],
76+
html: `<cmp-a></cmp-a>`,
77+
attachStyles: true,
78+
});
79+
80+
const findCmpStyle = () =>
81+
Array.from(page.doc.head.querySelectorAll('style')).find((styleElm) => styleElm.textContent?.includes('color: red'));
82+
83+
const initialStyleElm = findCmpStyle();
84+
expect(initialStyleElm).toBeDefined();
85+
86+
initialStyleElm!.remove();
87+
expect(findCmpStyle()).toBeUndefined();
88+
89+
await page.setContent(`<cmp-a></cmp-a>`);
90+
91+
const reattachedStyleElm = findCmpStyle();
92+
expect(reattachedStyleElm).toBeDefined();
93+
expect(reattachedStyleElm!.isConnected).toBe(true);
94+
});
95+
5996
describe('mode', () => {
6097
it('md mode', async () => {
6198
setMode(() => 'md');

0 commit comments

Comments
 (0)