Feature/render in iframe fix

[cristinecula]

@Rich-Harris Thanks for including this!

I have updated to 1.11.2 and tested it out. Unfortunately my original test case failed to test child components (although my version did work for them) and their css was not being added to the correct document.

The problem is that when a child component is mounted, the target element is not yet part of the correct document. It was created using document.createElement, thus target.ownerDocument points to the original document (window.document). After mount, the target element is added to the iframe and target.ownerDocument is pointing to the iframe's document.

I can think of three options for fixing this:

1. store the root components options.target.ownerDocument and reference it in the child components (my original approach)
2. create elements using the correct document (using target.ownerDocument.createElement)
3. call addCss after the elements are added to the DOM

I tried the last by adding a setTimeout around the addCss call:
generator.current.builders.mount.addLine( `setTimeout(function(){ if ( !target.ownerDocument.__sveltecss_${parsed.hash} ) addCss( target.ownerDocument )});` );

It works, but it's hardly ideal. First of all, it breaks all css tests due to it's async nature. Even worse, it triggers multiple style updates and reflows, since every component's css is added independently, instead of all in one go.

So I tried different stuff and finally came up with this solution: add the css after the dom is updated, using a render hook.

P.S. I am fully aware that this is a niche use case, so if the changes have an impact on the overall performance, I am ok with maintaining my own fork with this patch.

[Rich-Harris]

Ah, yep. This is more complicated than I thought. It turns out it's also broken the REPL — if you select an example with CSS (e.g. Area chart), then select a different one, then the first one again, the CSS isn't applied.

I'm a little hesitant to add more code to the generated output to support such a niche use case, so I've been wondering if there's another way we can tackle this. Could you render the CSS server-side? It looks a little like this:

require( 'svelte/ssr/register' );
const MyComponent = require( './components/MyComponent.html' );

const { css } = MyComponent.renderCss();

fs.writeFileSync( 'css/my-component.css', css );

(You don't have to use svelte/ssr/register, you can also compile to SSR code directly by passing generate: 'ssr' to the compiler, or similarly with a bundler. But it's probably the easiest way to get started. You might also need require('reify') if your components have dependencies.)

[cristinecula]

Thank you for the suggestion! I haven't thought of using SSR for this, but it makes a lot of sense. I will update my build to use this approach!

Also, I'm sorry I have wasted your time :)

[Rich-Harris]

Not a waste at all! Thanks for your understanding