为什么 Svelte 中的原始 html 模板大括号会产生空的 noscript 标签？答案

【问题标题】：Why do raw html template braces in Svelte produce empty noscript tags?为什么 Svelte 中的原始 html 模板大括号会产生空的 noscript 标签？
【发布时间】：2018-04-10 12:52:32
【问题描述】：

当使用 {{{triple}}} 大括号语法从字符串输出原始 html 时，我在编译器的输出中看到几个 noscript 标记。

例如：

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

有人知道为什么会呈现这些标签吗？

【问题讨论】：

标签： svelte

【解决方案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（注释节点没有）。

【讨论】：