chore: remove self-closing tags (#617)

* remove self-closing tags in src

* self-closing tags

Author: Rich-Harris

content/tutorial/01-svelte/07-lifecycle/01-onmount/app-a/src/lib/App.svelte

@@ -5,7 +5,7 @@
 <canvas
 	width={32}
 	height={32}
-/>
+></canvas>
 
 <style>
 	canvas {

content/tutorial/01-svelte/07-lifecycle/01-onmount/app-b/src/lib/App.svelte

@@ -20,7 +20,7 @@
 <canvas
 	width={32}
 	height={32}
-/>
+></canvas>
 
 <style>
 	canvas {

content/tutorial/01-svelte/07-lifecycle/03-tick/app-a/src/lib/App.svelte

@@ -27,7 +27,7 @@
 <textarea
 	value={text}
 	on:keydown={handleKeydown}
-/>
+></textarea>
 
 <style>
 	textarea {

content/tutorial/01-svelte/07-lifecycle/03-tick/app-b/src/lib/App.svelte

@@ -29,7 +29,7 @@
 <textarea
 	value={text}
 	on:keydown={handleKeydown}
-/>
+></textarea>
 
 <style>
 	textarea {

content/tutorial/02-advanced-svelte/01-motion/01-tweens/app-a/src/lib/App.svelte

@@ -4,7 +4,7 @@
 	const progress = writable(0);
 </script>
 
-<progress value={$progress} />
+<progress value={$progress}></progress>
 
 <button on:click={() => progress.set(0)}>
 	0%

content/tutorial/02-advanced-svelte/01-motion/01-tweens/app-b/src/lib/App.svelte

@@ -8,7 +8,7 @@
 	});
 </script>
 
-<progress value={$progress} />
+<progress value={$progress}></progress>
 
 <button on:click={() => progress.set(0)}>
 	0%

content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/TodoList.svelte

@@ -17,7 +17,7 @@
 
 				<span>{todo.description}</span>
 
-				<button on:click={() => store.remove(todo)} aria-label="Remove" />
+				<button on:click={() => store.remove(todo)} aria-label="Remove"></button>
 			</label>
 		</li>
 	{/each}

content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-b/src/lib/TodoList.svelte

@@ -21,7 +21,7 @@
 
 				<span>{todo.description}</span>
 
-				<button on:click={() => store.remove(todo)} aria-label="Remove" />
+				<button on:click={() => store.remove(todo)} aria-label="Remove"></button>
 			</label>
 		</li>
 	{/each}

content/tutorial/02-advanced-svelte/03-animations/01-animate/app-b/src/lib/TodoList.svelte

@@ -23,7 +23,7 @@
 
 				<span>{todo.description}</span>
 
-				<button on:click={() => store.remove(todo)} aria-label="Remove" />
+				<button on:click={() => store.remove(todo)} aria-label="Remove"></button>
 			</label>
 		</li>
 	{/each}

content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/App.svelte

@@ -30,7 +30,7 @@
 							on:click={() => {
 								selected = color;
 							}}
-						/>
+						></button>
 					{/each}
 				</div>
 

content/tutorial/02-advanced-svelte/04-actions/01-actions/app-a/src/lib/Canvas.svelte

@@ -66,13 +66,13 @@
 
 		previous = coords;
 	}}
-/>
+></canvas>
 
 {#if previous}
 	<div
 		class="preview"
 		style="--color: {color}; --size: {size}px; --x: {previous.x}px; --y: {previous.y}px" 
-	/>
+	></div>
 {/if}
 
 <style>

content/tutorial/02-advanced-svelte/04-actions/01-actions/app-b/src/lib/App.svelte

@@ -31,7 +31,7 @@
 							on:click={() => {
 								selected = color;
 							}}
-						/>
+						></button>
 					{/each}
 				</div>
 

content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md

@@ -6,5 +6,5 @@ Elements with a `contenteditable` attribute support `textContent` and `innerHTML
 
 ```svelte
 /// file: App.svelte
-<div +++bind:innerHTML={html}+++ contenteditable />
+<div +++bind:innerHTML={html}+++ contenteditable></div>
 ```

content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/app-a/src/lib/App.svelte

@@ -2,7 +2,7 @@
 	let html = '<p>Write some text!</p>';
 </script>
 
-<div contenteditable />
+<div contenteditable></div>
 
 <pre>{html}</pre>
 

content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/app-b/src/lib/App.svelte

@@ -2,7 +2,7 @@
 	let html = '<p>Write some text!</p>';
 </script>
 
-<div bind:innerHTML={html} contenteditable />
+<div bind:innerHTML={html} contenteditable></div>
 
 <pre>{html}</pre>
 

content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md

@@ -14,12 +14,12 @@ First, add the `<audio>` element along with its bindings (we'll use the shorthan
 		bind:currentTime={time}
 		bind:duration
 		bind:paused
-	/>+++
+	></audio>+++
 
 	<button
 		class="play"
 		aria-label={paused ? 'play' : 'pause'}
-	/>
+	></button>
 ```
 
 Next, add an event handler to the `<button>` that toggles `paused`:
@@ -30,7 +30,7 @@ Next, add an event handler to the `<button>` that toggles `paused`:
 	class="play"
 	aria-label={paused ? 'play' : 'pause'}
 	+++on:click={() => paused = !paused}+++
-/>
+></button>
 ```
 
 Our audio player now has basic functionality. Let's add the ability to seek to a specific part of a track by dragging the slider. Inside the slider's `pointerdown` handler there's a `seek` function, where we can update `time`:
@@ -60,7 +60,7 @@ When the track ends, be kind — rewind:
 +++	on:ended={() => {
 		time = 0;
 	}}+++
-/>
+></audio>
 ```
 
 The complete set of bindings for `<audio>` and `<video>` is as follows — seven _readonly_ bindings...

content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-a/src/lib/AudioPlayer.svelte

@@ -21,7 +21,7 @@
 	<button
 		class="play"
 		aria-label={paused ? 'play' : 'pause'}
-	/>
+	></button>
 
 	<div class="info">
 		<div class="description">
@@ -57,7 +57,7 @@
 					});
 				}}
 			>
-				<div class="progress" style="--progress: {time / duration}%" />
+				<div class="progress" style="--progress: {time / duration}%"></div>
 			</div>
 			<span>{duration ? format(duration) : '--:--'}</span>
 		</div>

content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-a/src/lib/sound-on.svg

@@ -27,13 +27,13 @@
 		on:ended={() => {
 			time = 0;
 		}}
-	/>
+	></audio>
 
 	<button
 		class="play"
 		aria-label={paused ? 'play' : 'pause'}
 		on:click={() => paused = !paused}
-	/>
+	></button>
 
 	<div class="info">
 		<div class="description">
@@ -69,7 +69,7 @@
 					});
 				}}
 			>
-				<div class="progress" style="--progress: {time / duration}%" />
+				<div class="progress" style="--progress: {time / duration}%"></div>
 			</div>
 			<span>{duration ? format(duration) : '--:--'}</span>
 		</div>

content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-b/src/lib/AudioPlayer.svelte

@@ -20,7 +20,7 @@
 <canvas
 	width={32}
 	height={32}
-/>
+></canvas>
 
 <style>
 	canvas {

content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/app-a/src/lib/App.svelte

@@ -22,7 +22,7 @@
 	bind:this={canvas}
 	width={32}
 	height={32}
-/>
+></canvas>
 
 <style>
 	canvas {

content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/app-a/src/lib/svelte-logo-mask.svg

@@ -31,7 +31,7 @@
 							on:click={() => {
 								selected = color;
 							}}
-						/>
+						></button>
 					{/each}
 				</div>
 

content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/app-b/src/lib/App.svelte

@@ -66,13 +66,13 @@
 
 		previous = coords;
 	}}
-/>
+></canvas>
 
 {#if previous}
 	<div
 		class="preview"
 		style="--color: {color}; --size: {size}px; --x: {previous.x}px; --y: {previous.y}px" 
-	/>
+	></div>
 {/if}
 
 <style>

content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-a/src/lib/App.svelte

@@ -33,7 +33,7 @@
 							on:click={() => {
 								selected = color;
 							}}
-						/>
+						></button>
 					{/each}
 				</div>
 

content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-a/src/lib/Canvas.svelte

@@ -70,13 +70,13 @@
 
 		previous = coords;
 	}}
-/>
+></canvas>
 
 {#if previous}
 	<div
 		class="preview"
 		style="--color: {color}; --size: {size}px; --x: {previous.x}px; --y: {previous.y}px" 
-	/>
+	></div>
 {/if}
 
 <style>

content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-b/src/lib/App.svelte

@@ -1,4 +1,4 @@
-<div class="box" />
+<div class="box"></div>
 
 <style>
 	.box {

content/tutorial/02-advanced-svelte/05-bindings/07-component-this/app-b/src/lib/Canvas.svelte

@@ -1,4 +1,4 @@
-<div class="box" />
+<div class="box"></div>
 
 <style>
 	.box {

content/tutorial/02-advanced-svelte/06-classes-and-styles/01-classes/app-a/src/lib/svelte-logo.svg

@@ -16,7 +16,7 @@ Just like elements can have children...
 ```svelte
 /// file: Card.svelte
 <div class="card">
-	+++<slot />+++
+	+++<slot></slot>+++
 </div>
 ```
 

content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/app-a/src/lib/Box.svelte

@@ -10,14 +10,14 @@ Inside `App.svelte`, we're rendering a `<Card>` component that contains `<span s
 /// file: Card.svelte
 <div class="card">
 +++	<header>
-		<slot name="telephone" />
-		<slot name="company" />
+		<slot name="telephone"></slot>
+		<slot name="company"></slot>
 	</header>+++
 
-	<slot />
-		
+	<slot></slot>
+
 +++	<footer>
-		<slot name="address" />
+		<slot name="address"></slot>
 	</footer>+++
 </div>
 ```
@@ -47,12 +47,12 @@ Alternatively, we could use the `:global` modifier inside `Card.svelte` to targe
 ```svelte
 /// file: Card.svelte
 <style>
-	/* ... */ 
+	/* ... */
 
 	+++.card :global(small) {
 		display: block;
 		font-size: 0.6em;
 		text-align: right;
 	}+++
 </style>
-```
+```

content/tutorial/02-advanced-svelte/06-classes-and-styles/04-component-styles/app-b/src/lib/Box.svelte

@@ -12,7 +12,7 @@ Open `FilterableList.svelte`. The `<slot>` is being rendered for each filtered i
 /// file: FilterableList.svelte
 <div class="content">
 	{#each data.filter(matches) as item}
-		<slot +++{item}+++ />
+		<slot +++{item}+++></slot>
 	{/each}
 </div>
 ```

content/tutorial/02-advanced-svelte/07-composition/01-slots/README.md

@@ -10,15 +10,15 @@
 	field="name"
 >
 	<header slot="header" class="row">
-		<span class="color" />
+		<span class="color"></span>
 		<span class="name">name</span>
 		<span class="hex">hex</span>
 		<span class="rgb">rgb</span>
 		<span class="hsl">hsl</span>
 	</header>
 
 	<div class="row">
-		<span class="color" style="background-color: {row.hex}" />
+		<span class="color" style="background-color: {row.hex}"></span>
 		<span class="name">{row.name}</span>
 		<span class="hex">{row.hex}</span>
 		<span class="rgb">{row.rgb}</span>