При использовании синтаксиса фигурных скобок {{{triple}}} для вывода необработанного html из строки я вижу пару тегов noscript в выводе компилятора.
Например:
<noscript></noscript><h1>Boom</h1><noscript></noscript>
Кто-нибудь знает, почему отображаются эти теги?
🤔 А знаете ли вы, что...
Svelte предоставляет инструменты для тестирования компонентов и приложений.
Когда значение foo
в теге {{{foo}}}
изменяется, Svelte необходимо удалить существующие узлы DOM, прежде чем он сможет вставить новые. Поскольку у него нет ссылок на ранее вставленные узлы (что потребовало бы дополнительного косвенного обращения и учета), ему необходимо знать, какие узлы DOM непосредственно предшествуют и следуют за {{{foo}}}
.
Во многих ситуациях это просто - если у вас есть такой шаблон ...
<div>{{{foo}}}</div>
... тогда Svelte может просто сделать div.innerHTML = foo
. Если у вас есть родственные узлы ...
<div>
<span>before</span>
{{{foo}}}
<span>after</span>
</div>
... тогда Svelte может удалить все, что находится между before
и after
.
Но если нет никаких гарантий относительно того, какие узлы окружают тег ...
<div>
{{#if x}}
<span>maybe I exist, maybe I don't</span>
{{/if}}
{{{foo}}}
{{#if y}}
<span>ditto!</span>
{{/if}}
</div>
... тогда возникает необходимость вставить узлы-заполнители, которые Svelte может использовать для обеспечения правильного обновления DOM. Узлы <noscript>
подходят, потому что они не действуют в браузере с включенным JavaScript (что, как мы знаем, имеет место, если работает Svelte), но все же имеют полезные методы, такие как insertAdjacentHTML
(которых у узлов комментариев нет).