Svelte parses HTML all wrong

[Rich-Harris]

Describe the bug

I'm a little shaken up. For as long as I've been programming, I thought that this...

<div />

...was shorthand for this:

<div></div>

It turns out it's not. Self-closing tags just aren't a thing in HTML — the /> is simply ignored by browsers altogether. In other words, this...

<div />hello!

...is equivalent to this — the hello! is inside the div, not outside it:

<div>hello!</div>

Svelte, however, treats <div /> as <div></div>. For a framework that prides itself on being a superset of HTML, this is a glaring error.

What should we do?

I think the right thing to do is disallow (edit: warn on) self-closing non-void HTML tags (this only applies to HTML, not other namespaces). This is a breaking change, but the alternatives are:

1. Continue to parse HTML incorrectly
2. Parse HTML correctly, treating <div /> as <div>, which is also a breaking change but one that would be nightmarish to debug

Ideally we would also disallow self-closing void elements (i.e. <input> rather than <input />), but whether or not this is realistic depends on whether Prettier's current habit of adding an unnecessary /> to void elements prevents us from doing that.

Reproduction

Navigate to about:blank, and do this:

document.body.innerHTML = `<div />hello!`
console.log(document.querySelector('div').textContent);

Then, in a Svelte component, do this:

<script>
  import { onMount } from 'svelte';

  let div;
	
  onMount(() => {
    console.log(div.textContent);
  });
</script>

<div bind:this={div} />hello!

In the first case, 'hello!' is logged. In the second case, the empty string is logged.

Logs

No response

System Info

This currently applies to all versions of Svelte

Severity

annoyance

[Rich-Harris]

Further reference: #8923

[dummdidumm]

I don't think we can do this for 5.0 - there's probably dozens of apps/libraries that use the self-closing behavior because it was the default in prettier-plugin-svelte for ages (the latest version doesn't care anymore, but will preserve <div /> if you wrote it like that).
Given how this was not a real issue (some may even prefer it / find the current behavior much more intuitive/consistent with component shorthands), do we really need to change this?
We also shouldn't error on <input />, because who really cares? At the very least this means adjusting prettier-plugin-svelte first, etc etc, so this is a multi-version game for very little gain IMO.

[arxpoetica]

There's actually a third option which is to just warn when the behavior happens (for now) and then maybe do # 2 error out in the future.

As a side note, I was around during the transition to HTML5 and never knew this either. Opinionated, but HTML5 browser behavior here is completely non-sensical and I'd be perfectly happy to leave it as is.

Put another way, this seems one minor area where modern frameworks have improved on bad browser behavior, with likely no real drawbacks.

[I updated my comment above in bold since I originally misunderstood the proposal and agree with erroring out.]

[Serator]

The issue of self-closing tags has been brought up many times (1 (post), 2, 3...) in the WHATWG and has been continually closed for the reason "it's too late to change anything, as many tools are based on current HTML behavior". Even the WHATWG regulars recognize the problem.
In my opinion what Svelte / JSX does in this matter is a better solution than what HTML offers.

[trueadm]

I actually thought that Svelte 5 intentionally tried to fix this problem with HTML, because it is a major source of bugs that are very difficult to spot (from my experience working in web dev). There are so many things wonky about HTML that I discover, to find some thread from a decade ago as to why it is the way it is, and generally it's because the benefit in fixing it isn't worth breaking the web.

I'd probably lean towards keeping the existing behaviour if I was being honest – and maybe back down on how much we set ourselves on being a true superset of HTML.

[Rich-Harris]

This isn't about whether or not Svelte's handling of these tags is preferable or correct or whatever. It's about eliminating a source of ambiguity.

Right now, if you copy-paste some HTML containing <div /> into a Svelte component or vice versa, you'll end up with a completely different element tree. That's just unacceptable. We've been saved by the fact that this situation is somewhat rare, but that doesn't change the basic fact.

And I'm not suggesting that we start treating <div /> the same way as HTML — that's clearly confusing and silly behaviour. I'm suggesting that we prevent the ambiguity from arising in the first place.

There's actually a third option which is to just warn when the behavior happens (for now) and then maybe do # 2 in the future.

This would be an acceptable compromise, if there's a lot of malformed markup in the wild because of Prettier.

[Rich-Harris]

(Actually, I just read the 'maybe do # 2 in the future' bit, which I disagree with — I meant that warning now and then erroring in 6+ would be an acceptable compromise)

[dummdidumm]

It's about eliminating a source of ambiguity.

...by introducing a new source of confusion, because the average web dev (us all included, as seen by this issue appearing now, and not years before) things that <div />foo means <div></div>foo and not <div>foo</div>. I agree with others here, I just don't think this is worth it.

[Rich-Harris]

Right now, this code...

<div />hello

will be understood differently by different people.

Adding an error or a warning that says 'this is ambiguous, you must either do <div>hello</div> or <div></div>hello depending on which you meant' categorically does not introduce a new source of confusion. It takes something ambiguous and requires you to make it explicit.

[dummdidumm]

You're right, like that it wouldn't.
I'm still against it, because for many people it's much more ergonomic (especially when using web components) to use self-closing in some situations - and they've got used to it now.
The fact that noone in 5 years (or more?) has opened an issue about this means that the "I copy-paste some HTML code using self-closing tags into a Svelte file and had an hour long debugging session" situations almost certainly never came up.

[Rich-Harris]

I get that it's more convenient, and in the absence of other considerations convenience is worth optimising for. But I think it's pretty weird that if you take this code from a Svelte component...

<div>
  <my-thing /> is this inside or outside my-thing?
</div>

...and paste it into an HTML file (or a CodePen or whatever), you get totally different behaviour. We're not doing our community any favours here, and we're not being good citizens of the web.