The is treated like a normal space if it is next to dynamic content.
Good: <div> </div>
Good: <div>Static content </div>
Bad: <div>{name} </div>
https://svelte.dev/repl/30b9b4d5610f47459ed2dc06cecfd185?version=3.5.1 shows the various cases. Notice the height of the divs when empty - an holds the last two open, but the first two just have a normal space. The second div uses a variable which evaluates to just '' (I was checking in case the first render was somehow different/exempt, but it's not).
I could reproduce this in Firefox and Chrome both.
Interesting note - I have a Sapper app where the first instance of this problem is fine, but the rest hit the problem. E.g. if Case is {case}<div>{name} </div>, then in my app case one is fine, and only case two and three are borked.
<Case case="one" name="" />
<Case case="two" name="" />
<Case case="three" name="" />
I'm not sure what makes it work in that one spot....
The
is treated like a normal space if it is next to dynamic content.Good:
<div> </div>Good:
<div>Static content </div>Bad:
<div>{name} </div>https://svelte.dev/repl/30b9b4d5610f47459ed2dc06cecfd185?version=3.5.1 shows the various cases. Notice the height of the divs when empty - an
holds the last two open, but the first two just have a normal space. The second div uses a variable which evaluates to just''(I was checking in case the first render was somehow different/exempt, but it's not).I could reproduce this in Firefox and Chrome both.
Interesting note - I have a Sapper app where the first instance of this problem is fine, but the rest hit the problem. E.g. if
Caseis{case}<div>{name} </div>, then in my app case one is fine, and only case two and three are borked.I'm not sure what makes it work in that one spot....