How to bootstrap Polymer 3.0 custom element in separate webapp

[robertfoobar]

I would like to consume my polymer 3.0 custom element inside an existing webapp. I understand, that polyserve generates an index.html that correctly bootstraps all custom elements and polyfills, e.g. after:

1. polymer init polymer-3-element
2. polymer serve

I try to reproduce this bootstrapping logic and I run into diverse cross-browser compatibility issues. Although in each browser, I can see the according index.html, I am not able to reproduce or re-engineer fully cross-browser compatible polyserved document.

Could you please create documentation that explains how I can integrate a custom element into an app other than the demo app. There's a similar doc here explaining things for an older polymer version.

Thanks a lot for all your efforts.

[ghost]

Thanks for raising the issue :) Hopefully the following will help until I can address your specific request:

Documentation on browser compatibility: https://www.polymer-project.org/3.0/docs/browsers Documentation on polyfills: https://www.polymer-project.org/3.0/docs/polyfills Documentation on building for production: https://www.polymer-project.org/3.0/toolbox/build-for-production

[robertfoobar]

Thanks @katejeffreys! During the last days, I implemented a way to bootstrap my Polymer 3 custom element inside static html supporting all browsers: https://github.com/robertfoobar/es6-custom-element/

Unfortunately, currently it seems there is no production bundling/build possibility for single polymer-3-element project templates: https://github.com/Polymer/polymer-cli/issues/945. Thus I had to come up with something on my own. Maybe I'm missing something?

If not, IMHO it would be really helpful having docs / officially supported process for this use case.

[ghost]

I believe the comments on https://github.com/Polymer/polymer-cli/issues/945 from jsilvermist and FredKSchott are correct; at this time AFAIK we don't have a tool or process for building single elements independent of an app. Sorry I can't be more helpful - maybe @justinfagnani would know more, though.

[robertfoobar]

@katejeffreys I've documented how to integrate a Polymer 3 custom element (hosted as ES6 JS Module with polyserve) into an Angular 4+ app here: https://github.com/robertfoobar/ng4-wc-sample. Feel free to reuse it the way you want.

[ghost]

Thanks, this is good to know :)