(minor) unquoted slash in attributes throws "attempted to close an element that was not open"

[mustafa0x]

Describe the bug

<a href=/>Home</a> is valid HTML5, but fails in Svelte.

Reproduction

<a href=/>go home</a>

Logs

No response

System Info

repl

Severity

annoyance

[tanhauhau]

related: https://mathiasbynens.be/notes/unquoted-attribute-values

[eug-L]

Hi, I would like to attempt this. From what I understand, the following restricts attribute values

const regex_starts_with_invalid_attr_value = /^(\/>|[\s"'=<>`])/;

Fixing OP's issue would be as simple as removing "/" from this regex, however <div class=foo/> will not be self closing as the attribute value becomes "foo/"

I thought of allowing "/" only if the read chunk length is 0, like so:

(chunk_length) => {
	if (quote_mark) return parser.match(quote_mark);
	return chunk_length > 0 ?
		!!parser.match_regex(regex_starts_with_invalid_attr_value)
		:
		!!parser.match_regex(/^[\s"'=<>`]/); // "/" allowed

which approach would be better?

[Jaishree2310]

@mustafa0x @dummdidumm I want to take this token ID can you please assign this to me?

[kala-goyal]

Hi @dummdidumm! I'm down to implement eug-L's solution for this. Totally understand if, instead of assigning it to me, you'd rather I just fix it and make the PR first, just lemme know which you prefer! I'll start working on it regardless though, I'm excited for Svelte 5 to come together!

[dummdidumm]

Sure, go ahead - just removing the / from the regex sounds find to me.

[kala-goyal]

@dummdidumm Just removing the / causes svelte special elements to fail, because the parser then reads, for instance, "svelte:component this={MyComponent}/> to refer to a component titled "{MyComponent}/", and the validator is then unable to find a closing tag.

I tried changing read_sequence in /packages/svelte/src/compiler/phases/1-parse/state/element.js to pass chunk_length, but am having trouble actually getting the chunk length because end is always "-1". I'm getting the sense that the chunks here are not done being broken into the smallest chunks possible, where start and end would actually populate with the correct values, but I'm not entirely sure where to go from here. Would you happen to have any guidance? I'll keep trying things on my own as well.

[prakhardotdeb]

@dummdidumm if this is still unresolved, I would like to work upon this. I am new to open source and I feel I can tackle this.