v0.18.13 - Empty non-void HTML elements inside <foreignObject> are serialized as XML self-closing (<div/>)
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức phù hợp với người mới
- 68/100
- Loại issue
- Lỗi
- Độ rõ ràng
- Khá rõ ràng
- Mức độ hoạt động
- Ít trao đổi
- Công nghệ
- html, node.js
- Lĩnh vực
- web-dev
Hướng nghiên cứu
Bắt đầu với bản tái hiện parseHTML được cung cấp và theo dõi document.body.innerHTML qua quá trình tuần tự hóa, tập trung vào việc xử lý namespace tại foreignObject. Xác nhận rằng các phần tử HTML không phải void sử dụng thẻ kết thúc tường minh, trong khi các phần tử HTML void được liệt kê có thể tự đóng, sau đó kiểm tra rằng kết quả đã tuần tự hóa round-trip mà không nuốt nội dung của các phần tử anh em.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
Empty non-void HTML elements inside <foreignObject> are serialized as XML self-closing (<div/>), producing invalid HTML that swallows following content
Summary
When an empty HTML element (e.g. <div>, <p>, <span>) appears inside an SVG <foreignObject>, parseHTML(...).document.toString() / .innerHTML serializes it using XML self-closing syntax (<div/>) instead of an explicit start/end tag pair (<div></div>).
Per the HTML standard, the self-closing slash is ignored on non-void HTML elements, so <div/> is parsed as an open <div>. Because <foreignObject> is an HTML integration point (its subtree is parsed as HTML, not SVG), this output is invalid: when a spec-compliant HTML parser (i.e. any browser) re-parses it, the unclosed <div> swallows every following sibling — the rest of the <foreignObject>, the rest of the <svg>, and all content after it.
The result is that a serialized document round-tripped through linkedom renders blank / severely mis-nested in a browser.
Environment
- linkedom: 0.18.13
- Node: v22.16.0
Minimal reproduction
const { parseHTML } = require('linkedom');
const input = '<svg><foreignObject><div></div></foreignObject></svg>';
const { document } = parseHTML('<!DOCTYPE html><html><body>' + input + '</body></html>');
console.log(document.body.innerHTML);
Actual output
<svg><foreignobject><div /></foreignobject></svg>
Expected output
<svg><foreignObject><div></div></foreignObject></svg>
<div> is a non-void HTML element and must be serialized as <div></div>. (foreignObject should also retain its camelCase — see note below.)
Scope / characterization
Only empty non-void elements in an SVG/foreignObject context are affected:
| Input | Output | Correct? |
|---|---|---|
<svg><foreignObject><div></div></foreignObject></svg> |
<div /> |
❌ self-closed |
<svg><foreignObject><p></p></foreignObject></svg> |
<p /> |
❌ self-closed |
<svg><foreignObject><div>hi</div></foreignObject></svg> |
<div>hi</div> |
✅ (non-empty) |
<div></div> (plain HTML) |
<div></div> |
✅ (outside SVG) |
So the trigger is: an empty element serialized while it is (incorrectly) treated as being in the XML/SVG namespace, even though <foreignObject> switches its subtree back to the HTML namespace.
Why it matters
<div/> is not equivalent to <div></div> in HTML. Given sibling content:
parseHTML('<!DOCTYPE html><body><svg><foreignObject><div></div><span>X</span></foreignObject></svg>')
.document.body.innerHTML
// => <svg><foreignobject><div /><span>X</span></foreignobject></svg>
linkedom keeps <span> as a sibling internally, but the emitted string is not round-trippable: a browser parsing <div /><span>X</span> inside a foreignObject nests <span> (and everything after) inside the <div>. Real-world impact: serializing a captured page that contains an inline SVG icon built with <foreignObject><div .../></foreignObject> (common on e.g. google.com) makes the whole page render blank.
Suggested fix
Elements inside a <foreignObject> are in the HTML namespace and should follow HTML serialization rules: only the HTML void elements (area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr) may be self-closed; all other elements must be serialized with an explicit end tag.
- Ngôn ngữ chính
- HTML
- Star
- 2.1k
- Fork
- 104
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của WebReflection/linkedom
-
`el.style.property = ''` and `e.style.setProperty('property', '')` should delete the property Đang mở
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 52/100
WebReflection/linkedom#327 · 1 bình luận ·
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 48/100
WebReflection/linkedom#326 · 5 bình luận ·
-
Build Apps For AI Agent. Đang mở
Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 15/100
WebReflection/linkedom#321 · 1 bình luận ·
-
Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 25/100
WebReflection/linkedom#318 · 5 bình luận ·
-
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 45/100
WebReflection/linkedom#317 · 2 reaction ·
Tất cả issue của WebReflection/linkedom
Issue tương tự
-
refactor
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 84/100
-
Issue-Bug
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
sugarlabs/musicblocks#8924 ·
-
dragonball.fandom.com Đang mởN: AdGuard Browser Extension P2: High T: Annoyance
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
AdguardTeam/AdguardFilters#242499 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 86/100
paperclipai/paperclip#13957 ·
-
[Bug]: Console does not validate "Confirm new password" when a user changes their own password Đang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100