fix: keep a trailing slash in an unquoted attribute value

src/nodes/html.ts

@@ -989,6 +989,8 @@ export default class HTMLElement extends Node {
 const kMarkupPattern = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z@\xB7\xC0-\xD6\xD8-\xF6\u00F8-\u03A1\u03A3-\u03D9\u03DB-\u03EF\u03F7-\u03FF\u0400-\u04FF\u0500-\u052F\u1D00-\u1D2B\u1D6B-\u1D77\u1D79-\u1D9A\u1E00-\u1E9B\u1F00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2126\u212A-\u212B\u2132\u214E\u2160-\u2188\u2C60-\u2C7F\uA722-\uA787\uA78B-\uA78E\uA790-\uA7AD\uA7B0-\uA7B7\uA7F7-\uA7FF\uAB30-\uAB5A\uAB5C-\uAB5F\uAB64-\uAB65\uFB00-\uFB06\uFB13-\uFB17\uFF21-\uFF3A\uFF41-\uFF5A\x37F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/gu;
 const kMarkupPatternWithCDATA = /<!--[\s\S]*?-->|<!\[CDATA\[[\s\S]*?\]\]>|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z@\xB7\xC0-\xD6\xD8-\xF6\u00F8-\u03A1\u03A3-\u03D9\u03DB-\u03EF\u03F7-\u03FF\u0400-\u04FF\u0500-\u052F\u1D00-\u1D2B\u1D6B-\u1D77\u1D79-\u1D9A\u1E00-\u1E9B\u1F00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2126\u212A-\u212B\u2132\u214E\u2160-\u2188\u2C60-\u2C7F\uA722-\uA787\uA78B-\uA78E\uA790-\uA7AD\uA7B0-\uA7B7\uA7F7-\uA7FF\uAB30-\uAB5A\uAB5C-\uAB5F\uAB64-\uAB65\uFB00-\uFB06\uFB13-\uFB17\uFF21-\uFF3A\uFF41-\uFF5A\x37F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/gu;
 // const kMarkupPattern = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/g;
+// Matches when the last attribute in a tag has an unquoted value (`name=value`, with nothing after it)
+const kUnquotedAttributeValueAtEnd = /(?:^|\s)[^\s"'<>=\/]+\s*=\s*[^\s"'<>`]+$/;
 const kAttributePattern = /(?:^|\s)(id|class)\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+)/gi;
 const kElementsClosedByOpening = {
 	li: { li: true, LI: true },
@@ -1138,6 +1140,15 @@ export function base_parse(data: string, options = {} as Partial<Options>) {
 		const tagStartPos = markupPattern.lastIndex - matchLength;
 		const tagEndPos = markupPattern.lastIndex;
 
+		// `/` is part of an unquoted attribute value (WHATWG HTML 13.2.5.38), so in
+		// `<a href=/foo/>` the trailing slash belongs to the value, not to the tag.
+		// Void elements are left alone: they never have content, so `<img src=a.png/>`
+		// keeps being read leniently as a self-closed tag with `src="a.png"`.
+		if (closingSlash && !leadingSlash && kUnquotedAttributeValueAtEnd.test(attributes) && !voidTag.isVoidElement(tagName)) {
+			attributes += closingSlash;
+			closingSlash = '';
+		}
+
 		// Add TextNode if content
 		if (lastTextPos > -1) {
 			if (lastTextPos + matchLength < tagEndPos) {

test/tests/unquoted-attribute-slash.js

@@ -0,0 +1,63 @@
+const { parse } = require('@test/test-target');
+
+// In the HTML tokenizer's "attribute value (unquoted) state" a `/` is part of the value,
+// only whitespace and `>` end it: https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(unquoted)-state
+describe('unquoted attribute value ending with a slash', function () {
+	it('keeps the slash in the value and does not self-close the element', function () {
+		const root = parse('<a href=/foo/>x</a>');
+		const a = root.firstChild;
+		a.getAttribute('href').should.eql('/foo/');
+		a.rawAttrs.should.eql('href=/foo/');
+		a.text.should.eql('x');
+		root.toString().should.eql('<a href=/foo/>x</a>');
+	});
+
+	it('keeps the link text inside the element for absolute URLs', function () {
+		const root = parse('<p><a href=http://example.com/>Example</a> and <a href=/docs/>docs</a></p>');
+		const links = root.querySelectorAll('a');
+		links.length.should.eql(2);
+		links[0].text.should.eql('Example');
+		links[1].text.should.eql('docs');
+		root.toString().should.eql('<p><a href=http://example.com/>Example</a> and <a href=/docs/>docs</a></p>');
+	});
+
+	it('works for id and class values, which are parsed eagerly', function () {
+		const root = parse('<div id=foo/>text</div>');
+		root.firstChild.id.should.eql('foo/');
+		root.firstChild.text.should.eql('text');
+	});
+
+	it('works when it is not the first attribute and when the value contains slashes', function () {
+		const root = parse('<a class=x href=/a/b/>x</a>');
+		const a = root.firstChild;
+		a.getAttribute('href').should.eql('/a/b/');
+		a.text.should.eql('x');
+	});
+
+	it('is unchanged when the slash is separated from the value by whitespace', function () {
+		const a = parse('<a href=/foo/ >x</a>').firstChild;
+		a.getAttribute('href').should.eql('/foo/');
+		a.text.should.eql('x');
+		// a space before the slash is a self-closing start tag in the tokenizer, as before
+		const sc = parse('<a href=/foo />x').firstChild;
+		sc.getAttribute('href').should.eql('/foo');
+		sc.childNodes.length.should.eql(0);
+	});
+
+	it('is unchanged for quoted values and for attributes without a value', function () {
+		const quoted = parse('<a href="/foo/"/>x').firstChild;
+		quoted.getAttribute('href').should.eql('/foo/');
+		quoted.childNodes.length.should.eql(0);
+		const bare = parse('<custom-el disabled/>x').firstChild;
+		bare.hasAttribute('disabled').should.eql(true);
+		bare.childNodes.length.should.eql(0);
+	});
+
+	it('leaves void elements lenient: <img src=a.png/> is still a self-closed tag', function () {
+		const root = parse('<p><img src=a.png/>after</p>');
+		const img = root.querySelector('img');
+		img.getAttribute('src').should.eql('a.png');
+		img.childNodes.length.should.eql(0);
+		root.querySelector('p').text.should.eql('after');
+	});
+});