bug: Ionic fails to render inside an iframe

[lorenzodallavecchia]

Bug Report

Ionic version:

[x] 4.9.0

Current behavior:

Ionic fails to render when the Angular app is bootstrapped inside an iframe, but with the controlling Angular code kept outside of the frame. Note that the frame has the same origin, so this is likely not a cross-domain issue.

Expected behavior:

I would expect the application to render correctly inside the iframe.

Steps to reproduce:

Use the test repository. The basic reproduction scenario is the following.

1. Visit the test application in the browser. The application does not start (the iframe stays blank) and a DOMException is logged.

Another scenario is that of a browser with no support for the CssStyleSheet constructor.

1. Uncomment the first line in index.ts: import "./hacks";
2. Visit the test application in the browser. Now the rendering appears to work, but on a closer inspection you can see that CSS styles are not applied (e.g. the header shadow is missing).

Related code:

Test repository: https://github.com/lorenzodallavecchia/ionic-bug-iframe

Other information:

First of all, I think this is a bug in Stencil, but I could not create a stand-alone reproduction against that project because I have not fully understood how Ionic Angular "bootstraps" Stencil. Sorry about that.

The general issue is that Stencil is accessing the global document (and, via defaultView, its window), assuming that only a single document exists. I think that it should use the ownerDocument when possible and use that for finding header, body, etc.

For example in addStyle in the Stencil styles.ts I think it should accept style containers that are DOM documents instead of looking up the root document. Of course that would cause problems with the global Map used for saving styles.

A trickier issue is CssStyleSheet and other constructors. Basically the problem is that an object constructed with the constructor in a window will not be recognized as a valid instanceof in other windows. DOM methods will simply refuse to append a CSS stylesheet object that they see as "alien".

I am aware that my use case is probably an very special one. I would also like to know how you feel about this kind of issues and if a PR would be accepted.

Ionic info:

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 5.2.7

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.15.3
   npm    : 6.10.1
   OS     : Windows 10