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 rendername="Header"
is the name of the componentprops="{}"
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!