Emit Truly "raw" Html In Svelte

I'm receiving raw html snippets from a headless CMS that I need to render as-is in a Sapper application. This also includes cases where I receive an opening tag and the correspond

Solution 1:

Here's a wicked way...

DISCLAIMER Moving Svelte managed elements under its feet can't possibly be a good idea and I totally fail to appreciate what adverse side effects you might encounter next!

I especially recommend against using this in {#each} blocks, and especially keyed ones, since Svelte will want to reorder its elements and might be upset if they're not where it expects them in the DOM.

... but maybe it can get you unstuck for simple cases. You be the judge.

My idea is to render the full concatenated string (prefix + suffix) with an additional element I can grab and replace with a component already rendered independently by Svelte, outside of this fragment.

Here's the trick:

{@html prefix + '<spanid="vslot"></span>' + suffix}

Here's an example component that implements the trick:

<script>import { afterUpdate } from'svelte'exportlet prefix
    exportlet suffix

    let wrap
    let content

    afterUpdate(() => {
        const vslot = wrap.querySelector('#vslot')
        vslot.parentNode.replaceChild(content, vslot)
    })
</script><divbind:this={wrap}>
    {@html prefix + '<spanid="vslot"></span>' + suffix}
</div><divbind:this={content}><slot /></div>

You would consume it like this:

<Wrapper {prefix} {suffix}><MyComponent /></Wrapper>

REPL

Solution 2:

You can use slots in order to achieve a similar result by wrapping component inside another component. Here is official documentation: https://svelte.dev/tutorial/slots