fix: Allow unquoted slash in attributes (#14615)

* test: add sample for unquoted attributes

* fix: handle unquoted slash in attributes

* docs: allow unquoted slash in attributes

* test: add additional sample for unquoted href attributes

* fix: improve handling of self-closing tags with unquoted attributes

* Update .changeset/long-boxes-flow.md

---------

Co-authored-by: Rich Harris <[email protected]>

Author: panyang05

.changeset/long-boxes-flow.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow unquoted slash in attributes

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -504,8 +504,24 @@ function read_attribute(parser) {
 	let value = true;
 	if (parser.eat('=')) {
 		parser.allow_whitespace();
-		value = read_attribute_value(parser);
-		end = parser.index;
+
+		if (parser.template[parser.index] === '/' && parser.template[parser.index + 1] === '>') {
+			const char_start = parser.index;
+			parser.index++; // consume '/'
+			value = [
+				{
+					start: char_start,
+					end: char_start + 1,
+					type: 'Text',
+					raw: '/',
+					data: '/'
+				}
+			];
+			end = parser.index;
+		} else {
+			value = read_attribute_value(parser);
+			end = parser.index;
+		}
 	} else if (parser.match_regex(regex_starts_with_quote_characters)) {
 		e.expected_token(parser.index, '=');
 	}

packages/svelte/tests/parser-legacy/samples/attribute-unquoted/input.svelte

@@ -1 +1,3 @@
-<div class=foo></div>
+<div class=foo></div>
+<a href=/>home</a>
+<a href=/foo>home</a>

packages/svelte/tests/parser-legacy/samples/attribute-unquoted/output.json

@@ -2,7 +2,7 @@
 	"html": {
 		"type": "Fragment",
 		"start": 0,
-		"end": 21,
+		"end": 62,
 		"children": [
 			{
 				"type": "Element",
@@ -27,6 +27,84 @@
 					}
 				],
 				"children": []
+			},
+			{
+				"type": "Text",
+				"start": 21,
+				"end": 22,
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"type": "Element",
+				"start": 22,
+				"end": 40,
+				"name": "a",
+				"attributes": [
+					{
+						"type": "Attribute",
+						"start": 25,
+						"end": 31,
+						"name": "href",
+						"value": [
+							{
+								"start": 30,
+								"end": 31,
+								"type": "Text",
+								"raw": "/",
+								"data": "/"
+							}
+						]
+					}
+				],
+				"children": [
+					{
+						"type": "Text",
+						"start": 32,
+						"end": 36,
+						"raw": "home",
+						"data": "home"
+					}
+				]
+			},
+			{
+				"type": "Text",
+				"start": 40,
+				"end": 41,
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"type": "Element",
+				"start": 41,
+				"end": 62,
+				"name": "a",
+				"attributes": [
+					{
+						"type": "Attribute",
+						"start": 44,
+						"end": 53,
+						"name": "href",
+						"value": [
+							{
+								"start": 49,
+								"end": 53,
+								"type": "Text",
+								"raw": "/foo",
+								"data": "/foo"
+							}
+						]
+					}
+				],
+				"children": [
+					{
+						"type": "Text",
+						"start": 54,
+						"end": 58,
+						"raw": "home",
+						"data": "home"
+					}
+				]
 			}
 		]
 	}