Sibling self closing tags become nested

[m3m0m2]

Expected Behavior

A sequence of multiple self closing tags can be parsed.
Example:

<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="200" cy="200" r="3" />

Actual Behavior

<tag1 />
<tag2 />

seem to be parsed as:

<tag1>
  <tag2>
  </tag2>
</tag1>

so tag2 becomes a child of tag1.

Steps to Reproduce

For example try:

parse('<circle id="pointA" cx="100" cy="350" r="3" /><circle id="pointB" cx="200" cy="200" r="3" />')

I wonder if maybe this could be a domparser issue, not specific of this repo.

Example in StackBlitz

https://stackblitz.com/edit/react-he4dd8?file=src%2FApp.js

[remarkablemark]

Thanks for opening this issue @m3m0m2! Can you provide a reproducible example via StackBlitz JavaScript or TypeScript?

[m3m0m2]

Can you provide a reproducible example via StackBlitz?

Done, updated description.

[remarkablemark]

Thanks for the reproducible example. This is indeed a bug and it's happening in html-dom-parser.

The current workaround, like you noted in StackBlitz, is to not use self-closing tag:

<circle id="pointA" cx="100" cy="350" r="3"></circle>
<circle id="pointB" cx="200" cy="200" r="3"></circle>

I'm not sure how to fix this issue since html-dom-parser uses innerHTML and this is the browser behavior.

[remarkablemark]

@m3m0m2 Actually if your HTML string contains a parent, this might fix your issue: https://stackblitz.com/edit/html-react-parser-1434?file=src%2FApp.js

Let me know if this works:

const svgLines = `
  <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="30" cy="30" r="10" stroke="black" fill="transparent" stroke-width="5" />
    <circle cx="60" cy="60" r="10" stroke="black" fill="transparent" stroke-width="5" />
  </svg>
`;

parse(svgLines);