Sandboxed children of trusted Components are not re-rendered when the parent updates

[andy-haynes]

When a trusted Component renders a sandboxed child, there are React DOM roots for both the trusted parent and sandboxed child. Since the parent must render the outer element of the sandboxed Component, when the parent re-renders it replaces the sandboxed Component's container element. Even if the sandboxed child re-renders, the DOM root associated with the sandboxed child is no longer mounted on the page.

One workaround is to detect whether the DOM root is still mounted and re-mount if necessary, but this may be good cause to challenge the current implementation's use of React DOM roots. Another approach would be to serialize the React element (probably via SSR methods), using DOM manipulation to stitch existing sandboxed child nodes into the re-rendered parent DOM. I think this is a very promising approach that reduces performance overhead and opens up the use of validation via dompurify.