How to safely load Polymer in unknown environment - multiple versions or namespace?

Question

I have elements built with Polymer which needs to run on multiple sites (a widget) which:

Don't have Polymer included (fine, I can include)
Polymer already included at a compatible version (brilliant, unlikely)
Polymer at an unknown version (too old or too new, tricky)

Is it possible to load Polymer in a namespace? e.g. myObj.Polymer or MyPolymerName

~~I have found polymer-js which will let me load Polymer as a module, but this isn't an official way.~~ This still exports to the global scope

I suppose good old frames are out of the question right? I see the polymer documentation uses iframes in order to isolate their demos. — Logain, Jul 29 '15 at 03:32
It is not possible to load Polymer in a namespace. Polymer's experimented with mixing 0.5 and 1.0 elements on their website using various hacks, and found it too unwieldy. This topic is still a research area. — Aleksandar Totic, Jul 31 '15 at 19:09
@AleksandarTotic Thanks, damn, I hope this changes. Will continue my own research. If anyone finds a way, please post here! — Adam Heath, Jul 31 '15 at 23:39
@AdamHeath Did you manage to find a solution? I am facing the same exact problem at the moment? Ughh — dipole_moment, Jan 29 '16 at 21:20
@AdamHeath Thanks man. Doing some research now as well. If I find out a proper solution, I will post on this ticket. — dipole_moment, Feb 01 '16 at 16:44
@AdamHeath Just out of curiosity, what did you end up doing? — dipole_moment, Feb 05 '16 at 17:07

score 7 · Accepted Answer · answered Nov 27 '15 at 18:31

7

The solution for now is to rely on package management to resolve Polymer to a single compatible version for a project and its dependencies, and HTML Imports to de-duplicate loading of dependencies from multiple sources.

If you vend your elements as Bower packages, then a site can include them, with their dependencies and imports of Polymer, and if a compatible version of Polymer is available, use that one version across the whole project.

In the future version of Polymer, after ES6 modules and loaders are fully spec'ed, we will probably have a version of Polymer that's only exported via modules so that multiple versions can be scoped to their explicit imports and can safely coexist on a page.

answered Nov 27 '15 at 18:31

Justin Fagnani

10,483
2
27
37

Could you please be more elaborate? Are you essentially saying that the widget should not rely on Polymer and instead the web page who is loading the extension should be responsible for making Polymer available? – dipole_moment Feb 01 '16 at 16:15
No, I'm saying that the element will depend on Polymer via a dependency in it's bower.json, and Bower will warn on incompatible versions of Polymer. All Polymer elements should directly import polymer.html via an HTML import. – Justin Fagnani May 20 '16 at 23:57

How to safely load Polymer in unknown environment - multiple versions or namespace?

1 Answers1