Rendering Svelte Component in an iFrame

[ugurkellecioglu]

Hi! Thanks for such a great project :)

I have created a Svelte component and I can render it in the body with - (all codes executed in content.js)

const app = new ChatModal({ target: document.body })

which is fine, but I'd like to render it in an iframe to not be affected by other styles on the injected page (I hope that makes sense).

const iframe = document.createElement("iframe");
iframe.onload = (ev) => {
    const app = new App({
        target: iframe.contentWindow.document.body,
        props: {
            name: 'world'
        }
    });
};
document.body.append(iframe);

This code snippet works for rendering the component in the iframe, but the styles won't work.

Do you know how I can inject a component in an iframe without losing styling?

[NekitCorp]

Hello! Looks like this is a svelte rendering problem in the iframe: sveltejs/svelte#331

I found an example of component rendering in iframe using a wrapper component Frame. In my case it looks like this:

import Frame from "src/components/Frame.svelte";
import Options from "src/components/Options.svelte";

const iframe = document.createElement("iframe");
iframe.onload = (ev) => {
    new Frame({
        target: iframe.contentWindow.document.body,
        props: {
            component: Options,
            count: 12,
        },
    });
};
document.body.append(iframe);

and the styles are successfully applied inside iframe. Hope this helps you!

[NekitCorp]

Oh, it looks like this method moves all the styles of the current page in iframe.

Maybe the emitCss approach can help too:

vite.config.ts:

export default defineConfig({
    plugins: [svelte({ emitCss: false }), crx({ manifest })],
...