Text Content being duplicated

[barelyhuman]

Any island tree being constructed inside a textContent based DOM Node get's replicated.

Example:

const HelloIsland = ()=>{
 return <h1>Hello</h1>
}


export const get = (ctx)=>{
  return (
    <>
      <p>
        <HelloIsland />
      </p>
    </>
  );
}

Would end up creating multiple <h1> and p tags

[barelyhuman]

This is only in cases where the island renders an invalid semantic child,

example:

<p>
 <h1>
  Hello World
 </h1>
</p>

This is to be caught at the AST level since preact will go ahead and render it as sibling when the component is rendered with an island.

The other option is to generate a text node tree like fresh does but that would make the rendering a little more complicated.

[barelyhuman]

The reason for this is as listed in this issue
preactjs/preact#4093

Possible solutions

• Wait for preact/debug to handle this
• Handle it on the AST level with a DOM/JSX Tree sanitizer
• Handle it on the AST level with a warning for known cases from the spec instead of sanitizing it