M4 · Template-Logik

Spezial-Tags — {@const}, {@html}, {@render}, {#key}

Die kleinen Werkzeuge fürs Markup: lokale Konstanten, rohes HTML, Snippets rendern, Blöcke neu aufbauen und Werte debuggen.

{@const} — lokale Konstante

{@const} definiert eine lokale Konstante innerhalb eines Blocks — besonders nützlich in {#each} oder {#if}, um einen Wert einmal zu berechnen und mehrfach zu verwenden, statt ihn im Markup zu wiederholen:

svelte

{#each warenkorb as position (position.id)}
  {@const zeilensumme = position.preis * position.menge}
  <li>
    {position.name}: {zeilensumme} €
  </li>
{/each}

ℹ️ Wo {@const} stehen darf

{@const} ist nur als direktes Kind eines Blocks ({#each}, {#if}, {#await}, {#snippet} …) oder eines Komponenten-Tags erlaubt — nicht frei auf oberster Ebene. Für seitenweite abgeleitete Werte nutzt du weiterhin $derived.

{@html} — rohes HTML einfügen

Normalerweise escaped Svelte alle Ausdrücke: Aus <b> wird sichtbarer Text, kein fettes Element. Mit {@html} fügst du einen String bewusst als echtes HTML ein — etwa gerenderten Markdown:

svelte

<script lang="ts">
  let markdownHtml = '<strong>fett</strong> und <em>kursiv</em>';
</script>

{@html markdownHtml}

🚫 XSS-Gefahr — niemals ungeprüften Input!

{@html} umgeht den eingebauten Schutz. Steckt in dem String Benutzereingabe (Kommentar, Profiltext …), kann eingeschleustes <script> im Browser des Opfers laufen — eine klassische Cross-Site-Scripting-Lücke. Verwende {@html} nur mit Inhalt, dem du vertraust, oder bereinige ihn vorher serverseitig (z. B. mit einer Sanitizer-Bibliothek).

🛤️ Rails-Vergleich: raw / html_safe

Das kennst du exakt so aus Rails: ERB escaped standardmäßig, und raw bzw. .html_safe schalten den Schutz ab — mit derselben XSS-Verantwortung. {@html} ist Sveltes raw. Die Sicherheits-Faustregel ist in beiden Welten identisch: niemals unbereinigten User-Content roh ausgeben.

kommentar.html.erb erb

<%# Rails: HTML wird per Default escaped %>
<%= @kommentar %>            <%# sicher: < wird zu &lt; %>

<%# Escaping ausschalten -> nur mit vertrauenswürdigem Inhalt! %>
<%= raw @kommentar %>
<%= @kommentar.html_safe %>

{@render} — Snippets rendern

Mit {@render} rufst du ein Snippet auf — einen wiederverwendbaren Markup-Baustein, den du mit {#snippet} definierst. Snippets ersetzen die früheren Slots und können Parameter entgegennehmen:

svelte

{#snippet zeile(text)}
  <li class="item">{text}</li>
{/snippet}

<ul>
  {@render zeile('Erster Eintrag')}
  {@render zeile('Zweiter Eintrag')}
</ul>

ℹ️ Mehr dazu in M3

Snippets und {@render} haben wir ausführlich im Modul Props & Kommunikation behandelt (Lektion „Snippets & {@render}"). Hier siehst du sie nur als eines der Markup-Spezial-Tags.

{#key} — Block bei Änderung neu erzeugen

{#key ausdruck} zerstört seinen Inhalt und baut ihn komplett neu auf, sobald sich der Ausdruck ändert. Das ist nützlich, um eine Komponente frisch zu mounten (lokaler State wird zurückgesetzt) oder um eine Einblend-Transition erneut abzuspielen:

svelte

{#key benutzerId}
  <!-- Bei jeder Änderung von benutzerId wird dieser
       Block zerstört und komplett neu erzeugt -->
  <Profil id={benutzerId} />
{/key}

In der folgenden Demo hängt ein {#key neustart} um eine Box mit Einflug-Transition. Jeder Klick erhöht neustart — der Block wird neu erzeugt und die Animation läuft erneut, mit frischer Farbe:

▶ {#key} baut neu auf · Interaktiv

Instanz #0

{@debug} — Werte beim Ändern anhalten

{@debug wert} loggt die angegebenen Variablen in die Konsole und löst — bei geöffneten DevTools — einen debugger-Breakpoint aus, sobald sich einer der Werte ändert. Ein praktisches Werkzeug zum Nachvollziehen von Reaktivität; ohne Argumente ({@debug}) reagiert es auf jede State-Änderung im Umfeld:

svelte

{@debug wert}

<p>Aktueller Wert: {wert}</p>

Zusammenfassung

💡 Das Wichtigste

{@const}: lokale Konstante innerhalb eines Blocks.
{@html string}: rohes HTML — nur mit vertrauenswürdigem Inhalt (XSS!).
{@render snippet()}: Snippet aufrufen (Details in M3).
{#key wert}: Inhalt bei Änderung zerstören und neu aufbauen.
{@debug wert}: Werte loggen und beim Ändern anhalten.

🎯 Probier es selbst

Baue eine kleine Zähler-Komponente mit eigenem $state und packe sie in ein {#key}. Zähle hoch und drücke dann „Neu aufbauen" — der interne Zähler springt auf 0 zurück, weil die Komponente frisch gemountet wird. Ergänze außerdem ein {@const} in einer Liste, das pro Eintrag eine Zwischensumme berechnet.