Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Constructor and attribute mismatch while parsing HTML #1386

Open
lukasbash opened this issue Apr 6, 2024 · 0 comments
Open

Constructor and attribute mismatch while parsing HTML #1386

lukasbash opened this issue Apr 6, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@lukasbash
Copy link

lukasbash commented Apr 6, 2024 •
edited

Describe the bug
Given the following code for parsing a paragraph element:

import { Window, DOMParser } from "happy-dom";

function tryHappyDom() {
  console.log("\nTrying to parse HTML with HappyDOM");

  const window = new Window();
  const html = new DOMParser(window).parseFromString(
    '<html><body><p align="center">test</p></body></html>',
    "text/html"
  );
  const p = html.querySelector("body")!.childNodes[0];

  console.log("Element constructor name: ", p.constructor.name);
  console.log("Element align: ", p.align);
  console.log("Element align via getAttribute: ", p.getAttribute("align"));
}

tryHappyDom();

The output becomes:

Trying to parse HTML with HappyDOM
Element constructor name:  HTMLElement
Element align:  undefined
Element align via getAttribute:  center

If you compare the parsing to e.g. JSDOM, you will have notable differences, as the script:

import { JSDOM } from "jsdom";

function tryJSDOM() {
  console.log("\nTrying to parse HTML with JSDOM");

  const jsd = new JSDOM('<html><body><p align="center">test</p></body></html>');
  const p = jsd.window.document.querySelector("body")!.childNodes[0];

  console.log("Element constructor name: ", p.constructor.name);
  console.log("Element align: ", p.align);
  console.log("Element align via getAttribute: ", p.getAttribute("align"));
}

tryJSDOM();

The output becomes:

Trying to parse HTML with JSDOM
Element constructor name:  HTMLParagraphElement
Element align:  center
Element align via getAttribute:  center

To Reproduce
Steps to reproduce the behavior:

  1. Execute both snippets above via the bun runtime and see huge parsing differences.

Expected behavior
The constructor signature should match the actual parsed element. Attributes which are (even if deprecated) available on specific element implementations (according to MDN) should be set on the class instance and not only be available via attribute getters.

Screenshots

Device:

  • OS: macOS Sonoma 14.4.1
  • Browser: None - Ran via bun 1.1.2
  • Version: 14.5.0

Additional context
I am aware of the fact that libraries might not be comparable in all manners, but missing precise constructors and omitting attributes might be a showstopper for me. Is there maybe another way of parsing the string, so that everything works out they way I expect it? If not, it might be worth some notes in the docs, doesn't it?
@lukasbash lukasbash added the bug Something isn't working label Apr 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@lukasbash