Is there a way, to replace a tag in html content with a component?

[LubosAngus]

Hi there,

I'm currently struggling with task, where I have to replace a tag inside of a HTML string with a component. Gallery to be precise.

For example. I've got a HTML from trusted source, where I need to be able to replace gallery tag, with a component and use items, that are in the data-items attribute.

<h1>Lorem Ipsum</h1>
<p>Dolor sit amet, consectetur adipiscing elit.</p>
<div id="gallery" data-items="[&quot;https://placehold.co/600x400&quot;,&quot;https://placehold.co/400x600&quot;]"></div
<p>Fusce finibus tincidunt diam, et rhoncus sapien maximus in.</p>

Unfortunately, there is no way for me to change how the data is coming to us, so that's all I can work with.

I tried it with using jsx syntax, I got it just to the point, where I basically got HTML of an gallery, with styles, but it was not interactive. I couldn't open lightbox.

Thanks

[dvlden]

Maybe you can create a v-node from the markup that you get from the source.
createVNode - h

So, you'd check if the current iteration is having an id of gallery and in that case, you can swap it with your own custom component and pass any attributes as props.

I imagine in that way and sounds possible, not sure if you tried?