Basically, in strict mode, react executes all effects a bunch of times, so the shadow-root was getting cleared right after its content was mounted. The only way around this is to avoid clearing a shadow-root if the shadowRoot state variable has already been set.
Testing
I used this code in vite playground App.tsx to test manually in dev:
export { Full2 as default } from '../../../apps/react-workshop/src/Table.stories.tsx';
Before
After
It isn't possible to write a reliable test for this, since it's a dev + strict mode thing (not reproducible in prod).
However, I've added strict mode to ladle to help catch such issues in our stories during development.
Changes
This is left over from #1962
Basically, in strict mode, react executes all effects a bunch of times, so the shadow-root was getting cleared right after its content was mounted. The only way around this is to avoid clearing a shadow-root if the
shadowRootstate variable has already been set.Testing
I used this code in vite playground
App.tsxto test manually in dev:It isn't possible to write a reliable test for this, since it's a dev + strict mode thing (not reproducible in prod).
However, I've added strict mode to ladle to help catch such issues in our stories during development.
Docs
N/A