• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

117
Vistas
Better approach to render Svelte components from CMS driven HTML markup

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!

almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda