Как сделать HTML в Svelte

Question

Я пытался рендеринга HTML, сохраняя HTML в переменной, но он не работает, я также попробовал тройные фигурные скобки

<script>
    let name = 'world';
    let val = ""
    let ans2 = ""
    let ans3;
    import showdown from 'showdown';
    import validity from 'validity-checker';
    function dataSubmit(e){
        e.preventDefault();
    //ans = validity.isEmoji("ggg");
    ans2 = new showdown.Converter();
    ans3 = ans2.makeHtml(val)
    }
</script>

<div>
    <textarea bind:value={val} on:change={dataSubmit}></textarea>
    <div>
    {{{ans3}}}  
    </div>

</div>

Возвращаемый тип переменной ans3 похож на "

Hello"

Answer 1

Вы можете использовать {@html expression}

Svelte не очищает выражения перед внедрением HTML.Если данные поступают из ненадежного источника, вы должны очистить их, или вы подвергаете своих пользователей уязвимости XSS.

Answer 2

Обычно строки вставляются как обычный текст, а это означает, что такие символы, как < и >, не имеют специального значения.

Но иногда вам нужно отображать HTML непосредственно в компоненте. Например, слова, которые вы сейчас читаете, существуют в файле уценки, который включается на эту страницу в виде фрагмента HTML.

В Svelte это делается с помощью специального тега {@html ...}:

{@html строка}

Svelte не выполняет никакой очистки выражения внутри {@html ...} до того, как оно будет вставлено в DOM. Другими словами, если вы используете эту функцию, очень важно, чтобы вы вручную избегали HTML, поступающего из источников, которым вы не доверяете, иначе вы рискуете подвергнуть своих пользователей атакам XSS.

Из https://svelte.dev/tutorial/html-tags

Answer 3

Как Сатиш и CD... ответили:отображает вашу HTML-строку как HTML. Но это не сработает, если вы передадите объект HTML.

Если вы хотите, чтобы svelte отображал объект HTML, созданный вами в JavaScript, просто нужно указать цель и либо установить, либо добавить элемент в качестве дочернего элемента, как показано ниже:

      let myComponent = document.createElement('div');

document.getElementById('parent').appendChild(myComponent);

Реактивность еще сохраняется.