Skip to content

Commit f9aeb22

Browse files
committed
add self-closing-tags info
1 parent 88a15cd commit f9aeb22

File tree

1 file changed

+26
-0
lines changed

1 file changed

+26
-0
lines changed

packages/svelte/messages/compile-warnings/template.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,32 @@
3434

3535
> Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
3636
37+
In HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this _looks_ like a self-contained element with some text next to it...
38+
39+
```html
40+
<div>
41+
<span class="icon" /> some text!
42+
</div>
43+
```
44+
45+
...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text _inside_ the icon:
46+
47+
```html
48+
<div>
49+
<span class="icon"> some text! </span>
50+
</div>
51+
```
52+
53+
Some templating languages (including Svelte) will 'fix' HTML by turning `<span />` into `<span></span>`. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, and as such Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.
54+
55+
To automate this, run the dedicated migration:
56+
57+
```bash
58+
npx sv migrate self-closing-tags
59+
```
60+
61+
In a future version of Svelte, self-closing tags may be upgraded from a warning to an error.
62+
3763
## event_directive_deprecated
3864

3965
> Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead

0 commit comments

Comments
 (0)