mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.0 KiB
89 lines
2.0 KiB
---
|
|
title: Special tags
|
|
---
|
|
|
|
## {@html ...}
|
|
|
|
```svelte
|
|
<!--- copy: false --->
|
|
{@html expression}
|
|
```
|
|
|
|
In a text expression, characters like `<` and `>` are escaped; however, with HTML expressions, they're not.
|
|
|
|
The expression should be valid standalone HTML — `{@html "<div>"}content{@html "</div>"}` will _not_ work, because `</div>` is not valid HTML. It also will _not_ compile Svelte code.
|
|
|
|
> Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.
|
|
|
|
```svelte
|
|
<div class="blog-post">
|
|
<h1>{post.title}</h1>
|
|
{@html post.content}
|
|
</div>
|
|
```
|
|
|
|
## {@debug ...}
|
|
|
|
```svelte
|
|
<!--- copy: false --->
|
|
{@debug}
|
|
```
|
|
|
|
```svelte
|
|
<!--- copy: false --->
|
|
{@debug var1, var2, ..., varN}
|
|
```
|
|
|
|
The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
|
|
|
|
```svelte
|
|
<script>
|
|
let user = {
|
|
firstname: 'Ada',
|
|
lastname: 'Lovelace'
|
|
};
|
|
</script>
|
|
|
|
{@debug user}
|
|
|
|
<h1>Hello {user.firstname}!</h1>
|
|
```
|
|
|
|
`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
|
|
|
|
```svelte
|
|
<!-- Compiles -->
|
|
{@debug user}
|
|
{@debug user1, user2, user3}
|
|
|
|
<!-- WON'T compile -->
|
|
{@debug user.firstname}
|
|
{@debug myArray[0]}
|
|
{@debug !isReady}
|
|
{@debug typeof user === 'object'}
|
|
```
|
|
|
|
The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.
|
|
|
|
## {@const ...}
|
|
|
|
```svelte
|
|
<!--- copy: false --->
|
|
{@const assignment}
|
|
```
|
|
|
|
The `{@const ...}` tag defines a local constant.
|
|
|
|
```svelte
|
|
<script>
|
|
export let boxes;
|
|
</script>
|
|
|
|
{#each boxes as box}
|
|
{@const area = box.width * box.height}
|
|
{box.width} * {box.height} = {area}
|
|
{/each}
|
|
```
|
|
|
|
`{@const}` is only allowed as direct child of `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<Component />` or `<svelte:fragment />`.
|