<template> and stubborn hydration warnings...
So in case you don't know, here's the default behavior of declarative shadow DOM:
1.
<template shadowrootmode="open"> gets served to the client.
2. the HTML parser interprets this as shadow DOM in-place, hence removing the <template> tag.
and of course
3. React/Next says "wait, that doesn't match what I saw on the server..."
Support of DSD kinda necessitates this behavior, so I'm trying to find a work-around.
suppressHydrationWarning no longer works at all, because React recently changed its behavior (https://github.com/facebook/react/issues/25627) claiming it was never supposed to ignore element children, and that was a bug. Now you can only suppress warnings over attributes and text content.
At least one other person (https://github.com/facebook/react/issues/26071) has encountered this issue, but their workaround involves modifying react-dom and as a library author, I don't really have that kind of say in the consumer's project.
So yeah, main question is... any suggestions? How can I hack around this so the consumers of my library don't get a thousand errors?GitHub
Bug: React 18 is not able to suppressHydrationWarning · Issue #2562...
React version: 18.2.0 Steps To Reproduce clone https://github.com/justin-calleja/suppress-hydration-warning cd to both shw-17 and shw-18 directories and install with: yarn Run yarn dev to run both ...
GitHub
Bug: Reconciler should ignore Declarative Shadow DOM (DSD) · Issue ...
The reconciler does not ignore <template shadowRoot="open"> but handles them like a normal HostElement. In reality, as soon as the closing template tag is parsed, the component is r...
1 Reply
slowly accepting my unfortunate fate as the React team has been unresponsive for months and they took away the one escape hatch I had. 🥲
