How to bootstrap Polymer 3.0 custom element in separate webapp
robertfoobar opened this issue · 5 comments
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:
- polymer init polymer-3-element
- 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.
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
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.
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.
@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.
Thanks, this is good to know :)