Preact: [10.0.0-beta.2] Content rendered with dangerouslySetInnerHTML is removed during hydration

[johannesodland]

Changes made in 1595 removes content of VNodes with dangerouslySetInnerHTML when hydrating.

We use dangerouslySetInnerHTML to render content from our CMS. It renders fine on the server, but is now removed on the client side during hydration. When components are updated the content reappears. Peekaboo :)

Cause:

1. diff/index.js:279 innerHTML is not set (good) but the content node remains in excessDomChildren and retains its parentNode (change from previous behavior. ParentNode used to be null as a result of setting innerHTML).

1. diff/children.js:118 In diffChildren the remaining children in excessDomChildren is removed (These children now have a parent)

2. util.js:19 The content that was rendered with dangerouslySetInnerHtml is removed as it is still listed in excessDomChildren and has a parent.

[ForsakenHarmony]

We use dangerouslySetInnerHTML to render content from our CMS.

any reason you don't render it in preact with data from the cms?

[cristianbote]

Hey @johannesodland, thanks for opening this issue. Any chance that with this https://github.com/preactjs/preact/pull/1697 you're not running into those issues?

[johannesodland]

Hi @cristianbote

If #1697 is merged it will solve the problem. The check for !newHtml will make sure that diffChildren is not called when content is provided with dangerouslySetInnerHTML. (diffChildren will remove the content if it is called).

https://github.com/preactjs/preact/pull/1697/files#diff-44070032789f10581d1b70740a2aaacfR247

[johannesodland]

The test in #1595 should probably be updated. The element should retain its content even though innerHTML is not set during hydration.

https://github.com/preactjs/preact/pull/1595/files#diff-d99094fc21ed18a862b454cc996dc83fR630

[cristianbote]

Yup! That's correct, and Jason already patched it here https://github.com/preactjs/preact/pull/1697/files#diff-d99094fc21ed18a862b454cc996dc83f. So I guess this is fixed in #1697. Gonna close it but let us know if there's something else.

Have a great one!