{@html ...}

Чтобы вставить необработанный HTML в ваш компонент, используйте тег {@html ...}:

<article>
  {@html content}
</article>

:::note Убедитесь, что вы либо экранируете переданную строку, либо заполняете её только значениями, которые находятся под вашим контролем, чтобы предотвратить атаки XSS. Никогда не отображайте неочищенный контент. :::

Выражение должно представлять собой корректный самостоятельный HTML — это не сработает, так как </div> не является допустимым HTML:

{@html '<div>'}content{@html '</div>'}

Кроме того, это не скомпилирует код Svelte.

Стилизация

Контент, отображаемый таким образом, является «невидимым» для Svelte и, следовательно, не будет получать ограниченные стили — другими словами, это не сработает, и стили для a и img будут считаться неиспользуемыми:

<article>
  {@html content}
</article>

<style>
  article {
    a { color: hotpink }
    img { width: 100% }
  }
</style>

Вместо этого используйте модификатор :global, чтобы нацелиться на всё внутри <article>:

<style>
  article :global {
    a { color: hotpink }
    img { width: 100% }
  }
</style>