{@html ...}permalink
{@html expression}
テキストの式では、 <
や >
のような文字はエスケープされますが、HTML の式ではエスケープされません。
HTML の式は単独で正しい HTML になっている必要があります。{@html "<div>"}content{@html "</div>"}
は </div>
の部分が正しい HTML ではないため、動作しません。また、Svelteコードをコンパイルすることもできません。
Svelte は HTML を挿入する前に式をサニタイズしません。データが信頼できないソースからのものである場合は自分でサニタイズする必要があります。そうしないと、ユーザーを XSS の脆弱性 にさらしてしまいます。
<div class="blog-post">
<h1>{post.title}</h1>
{@html post.content}
</div>
{@debug ...}permalink
{@debug}
{@debug var1, var2, ..., varN}
{@debug ...}
タグは console.log(...)
の代わりになります。指定した変数の値が変更されるたびログに出力し、devtools を開いている場合はコードの実行を一時停止します。
<script>
let user = {
firstname: 'Ada',
lastname: 'Lovelace'
};
</script>
{@debug user}
<h1>Hello {user.firstname}!</h1>
{@debug ...}
はカンマ区切りの(任意の式ではなく)変数名のリストを受け取ります。
<!-- コンパイルできる -->
{@debug user}
{@debug user1, user2, user3}
<!-- コンパイルできない -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}
引数なしの {@debug}
タグは、(変数を指定した場合とは逆に)何らかの状態が変化した時にトリガされる debugger
文を挿入します。
{@const ...}permalink
{@const assignment}
{@const ...}
タグはローカル定数を定義します。
<script>
export let boxes;
</script>
{#each boxes as box}
{@const area = box.width * box.height}
{box.width} * {box.height} = {area}
{/each}
{@const}
は、{#if}
、{:else if}
、{:else}
、{#each}
、{:then}
、{:catch}
、<Component />
、<svelte:fragment />
の直下にのみ配置することができます。