I have the following scenario.

The CMS returns the markup to the browser in this format, where we need to render Svelte components in their respective placeholders.

• class="component" is the placeholder the component to render
• name="Header" is the name of the component
• props="{}" props passed to the component

<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>

Parent components like Accordion must be able to control its child components.

Here is my progress so far: https://codesandbox.io/s/crazy-wu-oey2k?file=/public/index.html:430-1321

Looking for help and suggestions for a better way to implement it.

Thank you!