<svelte:head> chapter

7 years ago · fd2b3e4daf
parent 57d5d67ebe
commit fd2b3e4daf
5 changed files with 29 additions and 1 deletions
--- a/site/content/tutorial/16-special-elements/06-svelte-head/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/06-svelte-head/app-a/App.svelte
@ -0,0 +1,5 @@
+<svelte:head>
+	<!-- elements go here -->
+</svelte:head>
+
+<h1>Hello world!</h1>
--- a/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte
@ -0,0 +1,5 @@
+<svelte:head>
+	<link rel="stylesheet" href="tutorial/dark-theme.css">
+</svelte:head>
+
+<h1>Hello world!</h1>
--- a/site/content/tutorial/16-special-elements/06-svelte-head/text.md
+++ b/site/content/tutorial/16-special-elements/06-svelte-head/text.md
@ -0,0 +1,13 @@
+---
+title: <svelte:head>
+---
+
+Lastly, `<svelte:head>` allows you to insert elements inside the `<head>` of your document:
+
+```html
+<svelte:head>
+	<link rel="stylesheet" href="tutorial/dark-theme.css">
+</svelte:head>
+```
+
+> In server-side rendering (SSR) mode, contents of `<svelte:head>` are returned separately from the rest of your HTML.
--- a/site/content/tutorial/99-todo/99-todo/text.md
+++ b/site/content/tutorial/99-todo/99-todo/text.md
@ -148,7 +148,7 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 * [x] `<svelte:component>`
 * [x] `<svelte:window>`
 * [x] `<svelte:body>`
-* [ ] `<svelte:head>`
+* [x] `<svelte:head>`


 ## Miscellaneous
--- a/site/static/tutorial/dark-theme.css
+++ b/site/static/tutorial/dark-theme.css
@ -0,0 +1,5 @@
+body {
+	background-color: #333;
+	color: whitesmoke;
+	transition: all 0.5s;
+}