Where if/else isn't the lesson being taught, in some cases show how it
can be wrapped around text nodes. This is to teach users about Svelte's
template compilation whilst not obfuscating the lessons.
@ -16,4 +16,11 @@ Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are
{/if}
{/if}
```
```
> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
Svelte is really good at surgically updating only the parts of the DOM that need changing, including text nodes. However, it does not optimise common code in if/else blocks like this, so the `<button>` element will be replaced whenever the condition is changed. To further improve this example, we can wrap just the text:
Henry Blyth
6 years ago