title: Keeping extra script tags in compiled svelte code
body: <p>I am currently having a svelte program that gets compiled to the corresponding, js and css files, which I am using in a separate html template string. That is getting used as part of an application's webview - it basically gets put into a iframe at the end inside that application.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta chatset='UTF-8&quot;&gt;
          &lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src img-src https: data:; style-src 'unsafe-inline' ${webview.cspSource}; script-src 'nonce-${nonce}';&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;link href=&quot;${styleResetUri}&quot; rel=&quot;stylesheet&quot;&gt;
          &lt;link href=&quot;${styleMainUri}&quot; rel=&quot;stylesheet&quot;&gt;
          &lt;link href=&quot;${styleMainPanel}&quot; rel=&quot;stylesheet&quot;&gt;
          &lt;script nonce=&quot;${nonce}&quot;&gt;
              const vscode = acquireVsCodeApi();
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;main&gt;&lt;App/&gt;&lt;/main&gt;
          &lt;script src=&quot;${scriptMainPanel}&quot; nonce=&quot;${nonce}&quot; /&gt;
          &lt;script src=&quot;${gramJS}&quot; nonce=&quot;${nonce}&quot; /&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I have my rollup config setup such that whatever is in my svelte folders gets compiled to js and css as said above which I import in the lines.</p>
  <p>The line <code>&lt;script src=&quot;${scriptMainPanel}&quot; nonce=&quot;${nonce}&quot; /&gt;</code> and <code>&lt;link href=&quot;${styleMainPanel}&quot; rel=&quot;stylesheet&quot;&gt;</code> are the places where I am importing the compiled code. Similarly, my css gets imported.</p>
  <p><strong>Notice</strong> that I am using the  tag as the place to mount my app like so,</p>
  <pre class="lang-js prettyprint-override"><code>import App from &quot;../components/MainPanel.svelte&quot;;
  
  const app = new App({
      target: document.getElementsByTagName(&quot;App&quot;)[0],
  });
  
  export default app;
  </code></pre>
  <h2>The Issue</h2>
  <p>It all works perfectly fine - it renders fine and all. But, the issue I am facing is that, the <code>&lt;script src=&quot;${gramJS}&quot; nonce=&quot;${nonce}&quot; /&gt;</code> that I have in the <code>body</code> of the <code>html</code> code above, is not seen finally. Is it that <code>svelte</code> removes all other tags? I have seen this normally if I have other <code>p</code>, <code>h1</code> or other <code>html</code> tags in the <code>body</code>, they get removed - but I have targeted <code>App</code> here, so it should not get removed yeah?</p>
  <p>If not is there any other way to include my script in that html? Maybe include it inside the pre-compiled files so that it stays even after the compiling?</p>
  <p><strong>Note</strong> That extra script import is itself a minified script as it is node and some reason I am not able to use it within svelte.</p>
  <p><strong>--Update 1--</strong></p>
  <p>After inspecting the rendered HTML, I have found that the extra script tag <code>&lt;script src=&quot;${gramJS}&quot; nonce=&quot;${nonce}&quot; /&gt;</code> gets shifted inside the script tag <code>&lt;script src=&quot;${scriptMainPanel}&quot; nonce=&quot;${nonce}&quot; /&gt;</code>. I do not understand why, more like any other tags in the html gets pushed into the script that references the compiled svelte code.</p>