Tengo el siguiente escenario.

El CMS devuelve el marcado al navegador en este formato, donde necesitamos representar los componentes de Svelte en sus respectivos marcadores de posición.

• class="component" es el marcador de posición del componente para representar
• name="Header" es el nombre del componente
• props="{}" accesorios pasados al componente

 <div class="component" name="Header" props="{...}"></div> <div>Some other content, not a component</div> <div class="component" name="Accordion"> <div class="component" name="AccordionItem" props="{...}"> <p>Accordion item 1 body</p> </div> <div class="component" name="AccordionItem" props="{...}"> <p>Accordion item 2 body</p> </div> <div class="component" name="AccordionItem" props="{...}"> <p>Accordion item 3 body</p> </div> <div class="component" name="AccordionItem" props="{...}"> <p>Accordion item 4 body</p> </div> </div> <div class="component" name="Footer" props="{..}"></div>

Los componentes principales como Accordion deben poder controlar sus componentes secundarios.

Aquí está mi progreso hasta ahora: https://codesandbox.io/s/crazy-wu-oey2k?file=/public/index.html:430-1321

Buscando ayuda y sugerencias para una mejor manera de implementarlo.

¡Gracias!