Turn a Svelte Component into HTML, CSS, and JS

My ideal end goal:

Dynamically output HTML, CSS, and JS from a Svelte component so I can host it elsewhere (e.g. S3 bucket).

Context:

1. I have a Svelte app that collects information from users
2. From this information, I have to generate a website
3. The user can select layout options and a color palette
4. These options will be passed down to the component that needs to be converted into HTML, CSS, and JS.

Questions:

1. Is this possible? I can see Svelt REPL/W3Schools/etc. have something similar (component on the left, dynamically generated web page on the right)
2. Can I use a CSS framework like Tailwind in the component?
3. In the best-case scenario, the user will change the options, and the dynamic website will update in near-real-time. Doable?

Example:

// website.svelte<script lang="ts">    export let layout: string;    export let colors: string[];    const onClick = () => alert(5);</script><button class="text-bold" on:click={onClick}>{text}</button> // Tailwind class<section class={layout + colors}>...stuff</section>

// builder.svelte<script lang="ts">    import Website from './website.svelte';    let srcdoc: string;    const generate = async () => {        // const props = {layout: 'grid', colors: ['blue', 'green']};        // const {js, html, css} = new Website(...props).decompile();        // srcdoc = `<style>${css}</style> ${html} <script>${js}</script>`;    };</script><button on:click={generate}>Generate</button><iframe title="Dynamic website" {srcdoc}></iframe>

Possible solutions

1. new Website({target: domElement}) and then take the innerHTML. This works only for the HTML. The CSS/JS is nowhere to be seen.
2. Perhaps I can create a separate Svelte project and invoke the iframe with a src instead of a srcdoc and pass the props in the query string. When the user is happy with their configuration, I will save it to a database and deploy the other Svelte project with that configuration for each user.
3. Make use of web components somehow.