Rendering Svelte components from HTML string

Question

I'm just looking into the Svelte framework for an upcoming project.

I was wondering (as it's a project requirement) whether it's possible to load some HTML string from a server (using the fetch api) and insert this into a Svelte component dynamically.

It seems possible to output HTML strings using {@html my_html_string}. Is there any way to have the tags for actual Svelte elements within the HTML string?

e.g.

<script>
    // import MyCustomElementHere....

    let my_html_string = 'Some text <MyCustomElement/> some more text';
</script>    

<p> {my_html_string} [somehow??] </p>

I was thinking this might be possible by turning a component into a Custom Element (or something), but I haven't managed to make this work (probably as I don't know enough about the framework yet).

Does anyone know if it's actually possible?

Rich Harris · Accepted Answer · 2019-07-20 15:29:41Z

11

It's not possible to do something like {@html "<MyComponent/>"}. That would require the generated code to include an HTML parser, which would increase bundle size significantly.

As you say though, you could do something very similar by compiling <MyComponent> to a custom element called <my-component> instead, and using that string. We need to finish the docs around that, but basically you need to add some metadata to the component...

<svelte:options tag="my-component"/>

...then pass the customElement: true option to the compiler.

answered Jul 20, 2019 at 15:29

Rich Harris

29.8k3 gold badges92 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2672537 Over a year ago

Thanks for the answer -- this is as I suspected! Are there further restrictions on what can be done with Svelte functionality in custom elements? (In particular, does the Svelte Store work in custom elements? I've tried and it seems not, but then again I might be doing it completely wrong!)

Rich Harris Over a year ago

Svelte custom elements should function identically to normal components — if not, it's a bug! Would be great to have an issue with a repro on github.com/sveltejs/svelte/issues

user2672537 Over a year ago

On further reflection, it's probably my setup (I have a mix of Svelte components and custom elements — the custom components are just there to be rendered from HTML strings). Do Svelte components and custom elements work together in this way, including all the Svelte functionality? (In which case, how should I set up my rollup file?)

NikaTheEngineer · Accepted Answer · 2021-05-06 21:01:40Z

0

Here is an idea: you could parse the string to find which custom element needs to be shown and then do something like this:

<script>
    import MyCustomElemen from ...

    let my_html_string = 'Some text <MyCustomElement/> some more text';
    // assume u parsed it
    let element_to_use = MyCustomElement;
    let html1 = 'Some text ';
    let html2 = ' some more text'
    new element_to_use({
      target: document.getElementById("someId"),
      props: {
        // whatever your component needs
      }
    })
</script>    

<div>
  <div
    contenteditable="true"
    bind:innerHTML={html1}
  ></div>
  <div id="someId"></div>
  <div
    contenteditable="true"
    bind:innerHTML={html2}
  ></div>
</div>

I hope the idea is visible and helpful!

answered May 6, 2021 at 21:01

NikaTheEngineer

111 bronze badge

1 Comment

NikaTheEngineer Over a year ago

As Rich mentioned, it is not a good idea to include an HTML parser in the code but if you keep the strings that you receive from the API small and simple, it won't be a huge deal to parse them.

Collectives™ on Stack Overflow

Rendering Svelte components from HTML string

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related