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 representarname="Header"
es el nombre del componenteprops="{}"
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!