svelte: Error on self-closed div and other tags

In vanilla HTML result of this markup:

<div>
  <div>
  <p>text</p>
</div>

<div>
  <div />
  <p>text</p>
</div>

in DOM will look like this:

<div>
  <div>
    <p>text</p>
  </div>
</div>

This is not an expected behavior and svelte gives an error on unclosed div

However, it gives no error if the div is self-closing and does not behave the same way as HTML

<div>
  <div />
  <p>text</p>
</div>

| v

<div>
  <div></div>
  <p>text</p>
</div>

It would be better if svelte either behaved according to html or gave an error when the div is not closed

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 26 (12 by maintainers)

Most upvoted comments

<div /> is translated to <div></div> by Svelte. Giving an error on <div> (unclosed) is good in my opinion because this is almost always an oversight by the developer, and catching that early is good.

dummdidumm on Apr 9, 2021

Hi You are saying that Svelte needs to show an error for this kind of code?:

<div />

It isn’t right. Because in the end, some tangs not going to have content or another tag inside it. So, then you don’t need the closing tag. If you don’t need something, then why have it, why write it, why take extra space…

<button>
  <span>Bark</span>
  <I class="fas fa-dog"> // No closing tag
</button>

It’s the same for the components:

<MyComponent></MyComponent>
<MyComponent />

babakfp on Apr 12, 2021

From your words and a few phrases showing that you did not read my messages ( but put thumbs down emoji ) and continuous, not argued(except your own opinion) disagreement with me I have a feeling that your goal is not to analyze the subject in a constructive way, but to prove me wrong

MarkTanashchuk on Apr 20, 2021

Closing this as this is nothing we want to change now. The current behavior is known by now to most Svelte users and changing it is both unexpected and would hurt DX.

dummdidumm on Apr 19, 2021

<I class="fas fa-dog"> // No closing tag It’s the same for the components:

First of all, I’m talking exclusively about tags, not components.

Main point of Svelte maintainers(as I know) is that “Svelte should be close to HTML/Svelte is a superset of HTML/etc”

So I think it is correct to match a language specification: which (not foreign and non-void in this case) tags are valid and which are not(and should be avoided).

DOM when you open index.html file with this content in <body>:

<div/>
<span/>
<a/>
<p/>
<i/>
text

Will be:

<div>
  <span>
    <a>
      <p>
        <i>text</i>
      </p>
    </a>
  </span>
</div>

And this can certainly be called unexpected behavior(And w3c validator gives an error)

In svelte it will turn into: Bottom dashes are indents

<div></div>_
<span></span>_
<a></a>_
<p></p>_
<i></i>
text

Which is even more unexpected behavior.

If you remove the slash from these tags, compiler will throw an error, unlike self-closing variant (which is strange because, according to HTML specification, both variants will treat a self-closing/not closed tag simply as an opening one).

MarkTanashchuk on Apr 13, 2021