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.

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

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

Open
mustafa0x opened this issue Aug 13, 2022 · 7 comments · May be fixed by #13429
Open
Labels
good first issue A small, encapsulated issue, ideal for a new contributor to Svelte to tackle.
Milestone

Comments

@mustafa0x
Copy link
Contributor

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
Copy link
Member

@Rich-Harris Rich-Harris added this to the 5.0 milestone Apr 2, 2024
@Rich-Harris Rich-Harris added the good first issue A small, encapsulated issue, ideal for a new contributor to Svelte to tackle. label Apr 2, 2024
@eug-L
Copy link

eug-L commented Apr 6, 2024

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?

@dummdidumm dummdidumm modified the milestones: 5.0, 5.x May 13, 2024
@Jaishree2310
Copy link

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

@kala-goyal
Copy link

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
Copy link
Member

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

@kala-goyal
Copy link

@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.

@mahaaaraja
Copy link

@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.

Pallavrai added a commit to Pallavrai/svelte that referenced this issue Aug 31, 2024
…th new expression which now supports = followed by / only.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue A small, encapsulated issue, ideal for a new contributor to Svelte to tackle.
Projects
None yet
8 participants