Calling shared services or libraries from a Polymer 1.0 custom element

Question

With AngularJS it's possible to share functionality between directives e.g. by injecting a common service into each directive that wishes to consume it.

I'm learning about Polymer 1.0 Custom Elements and am wondering how would a shared Javascript service/library be consumed from a custom element? The service/library isn't 3rd-party so we can modify it as we please, however it should also be possible to invoke it from legacy/non-Polymer code.

Examples of shared services could be a dialog service, or a service responsible for formatting date/time etc. It could offer any arbitrary behaviour that may also involve a remote call to, say, a web service.

What are the best practices in this regard? Is it to implement a behaviour as described in the following link?

https://www.polymer-project.org/1.0/docs/devguide/behaviors.html

Answer 1

The javascript functions in any Polymer element can consume any library available to them. Libraries usually expose global variables through which they can be consumed, e.g. JQuery's $ and lodash's _ can be used globally. Similarly, with your library you can expose a global variable, e.g. my MYLIB through which you can consume your API, e.g. MYLIB.formatTime, MYLIB.dialogService.

Polymer behaviors are typically used for sharing common functions between polymer elements.

Answer 2

Or you import a webcomponent which wraps the library you want. For lodash see for instance this one: https://github.com/Waxolunist/lodash-element