Enable createRawSnippet() to return a document fragment

[rikschennink]

Currently createRawSnippet requires you to return a root element, but that means it cannot be used in the same manner as the manually typed out snippet, see this example.

Is there a way to return a document fragment? Perhaps if you leave out the render() function it could return a document fragment as target? Or if you don't supply a single root element in the render() function it could automatically wrap your root elements in a fragment?

createRawSnippet((subprops) => ({
    setup(target) {
        // target is a document fragment
    }
})

Use case

I'm dynamically building a UI with Svelte, the UI is defined in a JSON object, it describes a tree of nodes (components, html elements, texts).

While I can define children dynamically, if I want to dynamically build slots it seems there's no way to do that apart from inserting an additional node per slot (as createRawSnippet requires you to return a root element in reander()).

So I can dynamically create a component like this:

<Component {...props}>
    {#snippet children()} ... {/snippet}
</Component>

But if that dynamic component has slots I can't set snippets to the slots without writing out all the slots manually {#snippet mySlot()} which is not possible as I'm dynamically building the UI.

I can pass the snippets as props with createRawSnippet but that results in the extra root element per snippet. The linked example shows the extra root element isn't required when manually defining snippets.

[StuBedore]

Same issue I am running into today. I am building a dynamic grid of components with a limit and "See More" option. However, the createRawSnippet method requires a root element, so if I just use a div, that results in empty grid cells.

The workaround now is:

      const snippet = createRawSnippet(() => {
        return {
          render: () => '<div class=\'hidden\'></div>',
          setup: (target) => {
            mount(BuildingAmenityCard, {
              target: gridTargetRef!,
              props: { amenity },
            });
          },
        };
      });
    });

Hide the useless div from the render function, and set the target of the mount call in setup to the grid element reference with $state<HTMLDivElement>() and <div bind:this={gridTargetRef}>.

However, a re-render will remove the hidden divs, leaving your mounted component in it's target, so you'll have to manually handle that.

[mrwokkel]

Given that <MyComponent>hi</MyComponent> is valid, I would expect the following to be valid as well:

const children = createRawSnippet(() => ({
	render: () => 'hi'
}));
...

<MyComponent {children}/>

It renders, but I do get the warning:
invalid_raw_snippet_render
The render function passed to createRawSnippet should return HTML for a single element.