CODEWITHSUNDEEP
svelte
plumpNation
plumpNation

Reputation: 172

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

When using the {{{triple}}} curly brace syntax to output raw html from a string, I see a couple of noscript tags in the output from the compiler.

For instance:

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

Does anyone know why these tags are rendered?

Upvotes: 0

Views: 989

Answers (1)

Rich Harris
Rich Harris

Reputation: 29615

When the value of foo in a {{{foo}}} tag changes, Svelte needs to remove the existing DOM nodes before it can insert the new ones. Since it doesn't have references to the previously-inserted nodes (that would require additional indirection and book-keeping), it needs to know which DOM nodes immediately precede and follow {{{foo}}}.

In many situations, that's straightforward — if you have a template like this...

<div>{{{foo}}}</div>

...then Svelte can simply do div.innerHTML = foo. If you have sibling nodes...

<div>
  <span>before</span>
  {{{foo}}}
  <span>after</span>
</div>

...then Svelte can remove everything between before and after.

But if there are no guarantees about which nodes surround the tag...

<div>
  {{#if x}}
    <span>maybe I exist, maybe I don't</span>
  {{/if}}

  {{{foo}}}

  {{#if y}}
    <span>ditto!</span>
  {{/if}}
</div>

...then it becomes necessary to insert placeholder nodes that Svelte can use to ensure the DOM is updated correctly. <noscript> nodes are suitable because they have no effect in a browser with JavaScript enabled (which we know is the case if Svelte is running), but still have useful methods like insertAdjacentHTML (which comment nodes don't have).

Upvotes: 2

Related Questions