Rendering components in other documents

[cristinecula]

Hello!

First of all, thank you for releasing this project and the time that's been invested in it! I am amazed by it's pure awesomeness and I am sure it will spark a revolution in the frontend frameworks landscape!

I have started to use Svelte in a production app and I am very satisfied with it's capabilities and performance.

One of my app's requirements is to render bits of UI in dynamically created iframes, so they can be overlayed over a customer's website and not be affected by the existing css and scripts (I can't wait for native custom elements browser support!). The problem is that Svelte components use the global document for adding the css and this leads to missing styles in the iframe. Here is a repl demonstrating the behaviour:

https://svelte.technology/repl/?version=1.9.1&gist=55752a08defcbd1423e2a2029eb02ef7

I have already made a branch with some code partially fixing the problem: master...widgetic:feature/ownerDocument

There are actually two issues here:

1. adding the css to the correct document (based on the target's ownerDocument) [fixed]
2. adding the css to both documents if needed (the global addedCss flag is not fitting anymore) [not sure of best way to fix]

I would love to hear your thoughts about this.

[cristinecula]

I updated the branch with a solution for 2.

[PaulBGD]

In firefox the h1 doesn't even get appended to the iframe. Is this supported in all browsers?

[cristinecula]

This is supported by all browsers, but there are a few quirks (we're using this in production with no issues).

Here is an updated repl that's cross-browser compatible: https://svelte.technology/repl/?version=1.9.1&gist=1ca1dd1182b4b30372bf741c898a6815

[Rich-Harris]

Thanks! Took your fix and turned it into #362 — released as 1.11.2.