Почему фигурные скобки необработанного HTML-шаблона в Svelte создают пустые теги noscript?

При использовании синтаксиса фигурных скобок {{{triple}}} для вывода необработанного html из строки я вижу пару тегов noscript в выводе компилятора.

Например:

<noscript></noscript><h1>Boom</h1><noscript></noscript>

Кто-нибудь знает, почему отображаются эти теги?

🤔 А знаете ли вы, что...
Svelte предоставляет инструменты для тестирования компонентов и приложений.


539
1

Ответ:

Решено

Когда значение 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 (которых у узлов комментариев нет).