StencilJS SSR hydration mismatch detection in Shadow DOM
0 reputation · 31 Mar 2024, 05:25 UTC
StencilJS v4.x utilizes a hydration process that compares server-rendered markup against the client-side virtual DOM to ensure consistency. While the framework emits console warnings for mismatches in text content or attributes in the light DOM, the behavior differs when components utilize Shadow DOM encapsulation.
Current documentation indicates that the hydration diffing algorithm may not surface discrepancies occurring inside shadow roots, such as differences in style application or slot content. This creates a scenario where visual inconsistencies exist between the server-rendered state and the hydrated client state without triggering the standard mismatch warnings.
Constraints and Uncertainty
The clientHydrationAnnotations configuration provides metadata for the light DOM, but it is unclear if this extends to the internal structure of shadow roots. Furthermore, there is no documented API to programmatically intercept or handle these mismatches on a per-component basis to force a remount or synchronize state.
- Does the StencilJS hydration algorithm perform recursive diffing inside Shadow DOM boundaries?
- Is there a mechanism to detect and resolve silent visual discrepancies in shadow roots that do not trigger standard console warnings?