"Polymer is not loaded" warning, mobile Safari iOS 10

[Steve Spencer]

React-polymer requires you to load in this strict order:

1. Polymer (window.Polymer, from polymer-micro, via an html import of a polymer element, for example)
2. react-polymer
3. React

Relevant page structure:

• html
  • head
    • script: webcomponents-lite
    • link rel=import to load polymer elements (and to define window.Polymer)
  • body
    • script (bundle) to load react-polymer then react

This works fine on Chrome + IE11. However on mobile Safari iOS 10, the HTML import script always loads AFTER the scripts on the page, no matter what async/defer I try. So react-polymer complains that Polymer is not loaded: https://github.com/jscissr/react-polymer/blob/master/index.js#L169

You need to require / import react-polymer and React after receiving the WebComponentsReady event. But due to other requirements script bundling, this might not be practical.

I suggest amending this line:
https://github.com/jscissr/react-polymer/blob/master/index.js#L172
to support loading in 3 cases:

1. Common / correct order (window.Polymer already initialised properly by polymer-micro, before react-polymer initialises)
2. Polymer not yet initialised; window.Polymer is undefined (warn, and use shady DOM if Polymer current version would also - namely, always)
3. Polymer not yet initialised, and window.Polymer is set to the global polymer settings object as per https://www.polymer-project.org/1.0/docs/devguide/settings (default to use shady DOM if window.Polymer.dom is undefined or 'shady' - whereas currently it would error since you don't check window.Polymer.Settings is defined).

I can put together a PR if this approach is approved.

Meanwhile I'm going to work around it by putting this script before the first HTML import of a Polymer element:

<script>
    // Fake up Polymer to trick react-polymer:
    window.Polymer = { Settings: { useNativeShadow: false } };
</script>

[Steve Spencer]

(thanks for publishing react-polymer, by the way!)

[Jan Schär]

Do you use vulcanize? If not, it might fix the loading order problem.

I don't think it is a good idea to change the default to Shady, because it explicitly says in the page you linked that shadow will be the default in the future. It would be a breaking change now, and another breaking change when Polymer changes defaults; and react-polymer obviously can't check the version of Polymer if it is not loaded.

But I do support adding a Polymer.dom === 'shady' check, PR welcome.

[Steve Spencer]

Yep, it's a regular HTML main page, importing a single "bundle" (via Vulcanize) of a bunch of elements from the polymer catalog. Think it must be a mobile Safari bug.

Thanks, I'll try and put that together.

[Steve Spencer]

Done - #11

(However I now have the situation where I have to fix my app to use shady DOM, such that when I use Polymer 2, I'll need something more sophisticated otherwise I'll be locked into using shady DOM when 2.0 is using native shadow DOM.)