title: Emit truly "raw" html in Svelte
body: <p>I'm receiving raw html snippets from a headless CMS that I need to render as-is in a Sapper application. </p>
  
  <p>This also includes cases where I receive an opening tag and the corresponding closing tag as two pieces of HTML between which I add a Svelte component.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
      import MyComponent from './MyComponent.svelte'
  
      // example snippets coming from headless CMS
      const prefix = '&lt;p class="test"&gt;' 
      const suffix = '&lt;/p&gt;'
  &lt;/script&gt;
  
  &lt;!-- use snippets as-is --&gt;
  {@html prefix}
  &lt;MyComponent /&gt;
  {@html suffix}
  </code></pre>
  
  <p>See <a href="https://svelte.dev/repl/4c1bf80ae00e476587344b6065e7346e?version=3.19.1" rel="nofollow noreferrer">https://svelte.dev/repl/4c1bf80ae00e476587344b6065e7346e?version=3.19.1</a></p>
  
  <p>However, Svelte expects each item rendered with @html to be self contained element and tries to "fix" common errors. For example, it will add a closing tag to the prefix-snippet, moving the <code>&lt;MyComponent/&gt;</code>-part out of the <code>p</code>.</p>
  
  <p>Is there a way to circumvent this behavior in general? Or more specifically - is it possible to surround rendered components with arbitrary raw HTML?</p>
  
  <p>As a side node: this runs as a sapper app and the server side rendered version of the page does correctly emit the raw HTML. It's when the client side rendering kicks in that the behavior changes.</p>