Difference between Polymer and Web Components polyfill?

Question

I'm a new developer and I'm having trouble finding anything that clearly identifies the differences between Polyfill and Polymer.

I'm fairly sure that Polyfill is apart of/or uses platform.js webcomponents.js which in turn is a part of what most browsers have been using to ensure Web Components can be used if they aren't fully supported yet. And Polymer uses some sort of templating like Angular's directives, but it seems to be a more permanent fixture of the web for the future.

Can anyone provide a more clear definition or link that illuminates the difference between the two?

Answer 1

Is Polymer based on the polyfill or not?

"Polymer sprinkles a bit of sugar over the standard Web Components APIs, making it easier for you […]." — Polymer Project homepage

"Polymer supports all major evergreen browsers and when combined with webcomponents.js supports IE 11+." — A Quick Introduction To Polymer (with emphasis addded by me)

This means that Polymer is not based on, i.e. does not have a dependency on, the polyfill (webcomponents.js). Instead, it appears to be built directly on top of the Web Components standards.

Only if your target browsers do not implement these standards will you need the polyfill to make up for that.

Main difference between Polymer and the polyfill:

"There are a few wrappers around web components […]. Polymer is a similar wrapper with a few extra goodies thrown in on top. […] One of the advantages of using Polymer is that it has a built in data binding model (like Angular) enabling complete applications to be made without any other libraries." — ibid (with emphasis added by me)

That means, while Webcomponents.js (the polyfill) is a replacement for missing functionality, Polymer is a thin wrapper (with some functional additions) around it.