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

Question

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

例如：

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

有谁知道为什么要渲染这些标签？

Answer 1

当 {{{foo}}} 标签中 foo 的值发生变化时，Svelte 需要删除现有的 DOM 节点才能插入新节点。由于它没有对 previously-inserted 节点的引用（这将需要额外的间接和 book-keeping），因此它需要知道哪些 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（评论节点没有）。

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

Why do raw html template braces in Svelte produce empty noscript tags?

svelte