can not parse correctly html with nested ul and li tags. #1039

lovetingyuan · 2023-09-04T09:03:51Z

Describe the bug
can not parse correctly html with nested ul and li tags.

To Reproduce
Steps to reproduce the behavior:

just run this code:

import { Window } from 'happy-dom'

const window = new Window({})
const document = window.document
document.write('<div id="app"></div>')
const container = document.querySelector('#app')
container.innerHTML = `
<ul>
  <li>
    <ul>
      <li>aaaaa</li>
      <li>bbbbb</li>
    </ul>
  </li>
</ul>
`
console.log(container.outerHTML)

/**
 * the output is wrong: 
 * <div id="app">
<ul>
  <li>
    <ul>
      </ul></li><li>aaaaa</li>
      <li>bbbbb</li>
    </ul>


</div>
 */

check the output, it should be same as input html but in fact is wrong.

Expected behavior
the right answer is

<ul>
  <li>
    <ul>
      <li>aaaaa</li>
      <li>bbbbb</li>
    </ul>
  </li>
</ul>

Device:

happy-dom version: "10.11.2"
node version: 18.15.0

danielbush · 2023-12-23T05:42:07Z

I think I've got a similar issue. I thought I'd post it here rather than make a new issue - but I can do that if it's clearer.

happy-dom: 12.10.3
bun: 1.0.18

import { Window } from 'happy-dom';

const window = new Window({
  url: 'https://localhost:8080',
  width: 1024,
  height: 768,
});
const document = window.document;

document.body.innerHTML =
  '<ul id="ul"><li id="li1">item 1</li><li id="li2"><ul ><li >trap</li></ul></li><li id="li3">item 3</li></ul>';

console.log(document.body.outerHTML);

window.happyDOM.cancelAsync();

gives:

<body><ul id="ul"><li id="li1">item 1</li><li id="li2"><ul></ul></li><li>trap</li></ul><li id="li3">item 3</li></body>

#li2 should contain a nested list with item "trap", but the nested list is empty, "trap" becomes a sibling alongside it and the outer ul fails to enclose #li3.

tq-xyy · 2024-02-21T11:18:38Z

I also have this issue. Did the author have some questions for solving the issue?

tq-xyy · 2024-02-21T11:52:24Z

import { Window } from 'happy-dom'

const document = new Window().document

const ul = document.createElement('ul')

// There are two cases.
// Case 1: It will output `<ul><li><ul><li>From sub list</li></ul></li></ul>` (right)
const li = document.createElement('li')
li.innerHTML = '<ul><li>From sub list</li></ul>'
ul.appendChild(li)

// Case 2: It will output `<ul><li><ul></ul></li><li>From sub list</li></ul>` (error)
// ul.innerHTML = '<li><ul><li>From sub list</li></ul></li>'
// document.body.appendChild(ul)

console.log(document.body.innerHTML)

It seemed that the problem happened when putting the <ul> element in <li>. And it is the problem of XMLParser.

The best method is to rewrite XMLParser. Now you can try to write a parser yourself to avoid it.

tq-xyy · 2024-02-21T12:15:06Z

This is a patch.

import UnnestableElements from 'happy-dom/lib/config/UnnestableElements.js'
delete UnnestableElements.LI

Due to parsing issues, see: - capricorn86/happy-dom#1126 - capricorn86/happy-dom#1039 - capricorn86/happy-dom#1237 - capricorn86/happy-dom#954

Update tests to reflect the change and also ensure that nesting is removed from all non-nestable elements.

danbentley · 2024-03-13T17:42:55Z

Thanks @lovetingyuan, we've encountered the same issue that left us scratching our heads when writing tests.

We also found that, as @tq-xyy suggests, removing LI from the Unnestable element config (happy-dom/src/config/UnnestableElements.ts) will allow nested <li> elements. Running your test snippet now correctly outputs the markup.

I've submitted a PR with this fix and updated the tests accordingly.

Update tests to reflect the change and also ensure that nesting is removed from all non-nestable elements.

capricorn86 · 2024-03-13T19:37:02Z

Thank you for contributing @danbentley! 🌟

I'm currently working on an implementation for this as well:
https://github.com/capricorn86/happy-dom/tree/1039-can-not-parse-correctly-html-with-nested-ul-and-li-tags

The problem is that <li> elements are not allowed to be nested when they are a direct child of another <li> element, but it seems like they are when they are not a direct child.

Example

var container = document.createElement('div');
container.innerHTML = '<li><li><span>Test</span></li></li>';

// Outputs "<li></li><li><span>Test</span></li>"
console.log(container.innerHTML);

Spec
https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element

danbentley · 2024-03-13T20:18:27Z

Thanks @capricorn86 for the explanation, it makes sense and it's something that occurred to me.

I suppose some elements are more "unnestable" than others, with <li> being the least unnestable of them all!

Sounds like an interesting challenge. I'm looking forward to see how you solve it!

…able>) doesn't allow itself as direct descendant when parsed, but should allow itself as descendant when it is not at first level

capricorn86 · 2024-03-13T21:54:26Z

The problem should be fixed now 🙂

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v13.8.3

lovetingyuan added the bug Something isn't working label Sep 4, 2023

jacobbuck added a commit to jacobbuck/dom-parse that referenced this issue Mar 4, 2024

Replace happy-dom with jsdom.

a3027a9

Due to parsing issues, see: - capricorn86/happy-dom#1126 - capricorn86/happy-dom#1039 - capricorn86/happy-dom#1237 - capricorn86/happy-dom#954

capricorn86 self-assigned this Mar 12, 2024

danbentley added a commit to danbentley/happy-dom that referenced this issue Mar 13, 2024

fix: [capricorn86#1039] Allow nested list items

b8c0bbd

Update tests to reflect the change and also ensure that nesting is removed from all non-nestable elements.

danbentley added a commit to danbentley/happy-dom that referenced this issue Mar 13, 2024

fix: [capricorn86#1039] Allow nested list items

f84faa1

Update tests to reflect the change and also ensure that nesting is removed from all non-nestable elements.

capricorn86 added a commit that referenced this issue Mar 13, 2024

chore: [#1039] Starts on implementation

c14c79d

capricorn86 added a commit that referenced this issue Mar 13, 2024

chore: [#1039] Starts on implementation

4f04283

capricorn86 linked a pull request Mar 13, 2024 that will close this issue

1039 can not parse correctly html with nested ul and li tags #1304

Merged

capricorn86 added a commit that referenced this issue Mar 13, 2024

fix: [#1039] Fixes problem where some elements (e.g. <li>, <h1> or <t…

3dc5f76

…able>) doesn't allow itself as direct descendant when parsed, but should allow itself as descendant when it is not at first level

capricorn86 added a commit that referenced this issue Mar 13, 2024

chore: [#1039] Fixes enum for element config

23e9616

capricorn86 closed this as completed in #1304 Mar 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

can not parse correctly html with nested ul and li tags. #1039

can not parse correctly html with nested ul and li tags. #1039

lovetingyuan commented Sep 4, 2023

danielbush commented Dec 23, 2023

tq-xyy commented Feb 21, 2024

tq-xyy commented Feb 21, 2024

tq-xyy commented Feb 21, 2024

danbentley commented Mar 13, 2024

capricorn86 commented Mar 13, 2024

danbentley commented Mar 13, 2024 •

edited

capricorn86 commented Mar 13, 2024

can not parse correctly html with nested ul and li tags. #1039

can not parse correctly html with nested ul and li tags. #1039

Comments

lovetingyuan commented Sep 4, 2023

danielbush commented Dec 23, 2023

tq-xyy commented Feb 21, 2024

tq-xyy commented Feb 21, 2024

tq-xyy commented Feb 21, 2024

danbentley commented Mar 13, 2024

capricorn86 commented Mar 13, 2024

danbentley commented Mar 13, 2024 • edited

capricorn86 commented Mar 13, 2024

danbentley commented Mar 13, 2024 •

edited