Fragments supporting dangerouslySetInnerHTML

[felixsanz]

Is your feature request related to a problem?

Currently seems like this is not possible:

// const icon = '<svg ...>'
<Fragment dangerouslySetInnerHTML={icon}></Fragment>

Type '{ dangerouslySetInnerHTML: string; }' is not assignable to type 'IntrinsicAttributes & { children?: any; }'.
  Property 'dangerouslySetInnerHTML' does not exist on type 'IntrinsicAttributes & { children?: any; }'.ts(2322)

Describe the solution you'd like

<Fragment> should accept dangerouslySetInnerHTML like other elements

Describe alternatives you've considered

Using spans everywhere

Additional context

No response

[manucorporat]

I am not sure we want to support this, innerHTML is a property of a html element, a fragment is syntax sugar for array of JSX nodes

[manucorporat]

Also, technically speaking, we cant inject random HTML whout being wrapped about a container HTML... it would add a massive amount of complexity to the renderer.

[felixsanz]

The nice thing about this would be that you can import svg or other assets with vite, and just print it directly without a wrapper element like span or div. But I understand the issues and it's a specific use-case that will not work if using it another way, so feel free to close the issue

[felixsanz]

Related: reactjs/rfcs#129

[manucorporat]

I will keep an eye open, but this is specially tricky in qwik because of the serialization requirements, and update after ssr. Thanks for the issue, but i will close since we will not implement this anytime soon

[Nefcanto]

@manucorporat since you mentioned you wouldn't be implementing this soon, what is our alternative?

We are considering migrating to Qwik + Qwik City from React + Next for our entire company and all projects.

We're testing one project for migration and now we're stuck at this.

In Next, we get data from a headless CMS. Inside this data, there is SVG tags. So SVG tags are not available at build time. We receive them from API.

In React, we could use:

                    <div
                        className="[&>*]:text-icon w-[55px] aspect-square group-hover:-scale-x-100 transition-all duration-500 "
                        dangerouslySetInnerHTML={{ __html: item.iconSvg }}
                    />

This way, we could print the SVG using React and style it using Tailwind.

What should we do to migrate this code to Qwik + Qwik City?

[manuelsanchez2]

Same issue here with the SVGs!

[Nefcanto]

@manuelsanchez2 try this code:

<div dangerouslySetInnerHTML={dynamicSvg} />