Unexpected list element hoisting

[geoffgscott]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

rehype-parse@9.0.0

Link to runnable example

https://codesandbox.io/p/devbox/loving-borg-9p5c5q?file=%2Fsrc%2Findex.ts%3A11%2C7

Steps to reproduce

When using <li> elements inside of tags that are not <ul> the nested children get hoisted out. In the codepen I have used the custom tag <custom_list> but the same behavior occurs with standard <div> tags.

Input:

<custom_list>
  <li>
    <p>Text</p>
  </li>
  <li>
    <custom_list>
      <li><p>Nested Text</p></li>
    </custom_list>
  </li>
</custom_list>

Output:

<custom_list>
  <li>
    <p>Text</p>
  </li>
  <li>
    <custom_list>
    </custom_list>
  </li>
  <li><p>Nested Text</p></li>
</custom_list>

Expected behavior

The nested list item should be maintained as child of element inside the <li> tag

Actual behavior

The child of the element inside the <li> tag is hoisted up 1 level.

Runtime

Other (please specify in steps to reproduce)

Package manager

pnpm

OS

Linux

Build and bundle tools

Vite

[wooorm]

Hey Geoff!

This is how HTML works.

let x = `<div>
  <custom_list>
    <li>
      <p>Text</p>
    </li>
    <li>
      <custom_list>
        <li><p>Nested Text</p></li>
      </custom_list>
    </li>
  </custom_list>
</div>
`

const y = document.createElement('div');
y.innerHTML = x
console.log(y.innerHTML)

<div>
  <custom_list>
    <li>
      <p>Text</p>
    </li>
    <li>
      <custom_list>
        </custom_list></li><li><p>Nested Text</p></li>
      </custom_list>
    
  
</div>

You need to stick with the rules of the HTML language. You can’t have lis in random elements.
(and if you want custom elements, use - instead of _ in the name.)