Skip to content

Preact 10 rendering into document.body clobbers existing DOM nodes #2264

@cgwyllie

Description

@cgwyllie

Hello,

I'm seeing an unexpected behaviour when trying to render an app directly into document.body.

Maybe this isn't best practice but I'm using Preact in this way to append overlays and modal content to existing web pages, so it's not really a typical SPA where I control the entire page.

What is observed is that on first render an existing DOM node of the same type can be replaced by the rendered content. This does not happen with Preact 8 (although it seems subsequent updates just always append the content again).

What I'd expect is that the Preact app content is appended to the DOM if it was never previously mounted, and after that I'd expect only the 'Preact' nodes to be updated on subsequent renders.

You can see two examples here:

I found that if you render into a document fragment, then append the fragment to the body, this works as expected, but it performs poorly and feels a bit like a hack. The DOM nodes are removed from the fragment after initial render although Preact still manages to update them on subsequent renders.

I also looked into the 'replaceNode' parmeter of render, but couldn't achieve the desired effect with it.

Perhaps this isn't a bug, but I'm keen to understand exactly what is going on here, and if there is any more suitable workaround.

The use of Preact 10 is desirable because Fragments allow rendering multiple overlays at the same time without containing them inside another DOM node in the body.

Thanks,
Chris

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions