Describing Polymer Js in brief with web components and polyfills

Polymer, polyfills, web components, you may have already come across these terms as you’ve started digging about Polymer Js. In this article I will try to cover what polymer exactly is, what is the team Polymer’s agenda, what are web components and why we need polyfills.

People say Polymer is a JavaScript library; but in my opinion, Polymer is a philosophy. Well, I have my reasons to believe it like that way; which I will describe later. But for the time being, yes Polymer is a JavaScript library which helps to create reusable UI elements and beautiful web application basing on material design concept.

Lots of questions and confusions raise in people’s mind when they hear about a new JavaScript framework library to develop a web app now a days; as Angular, Ember, Backbone etc took the web application development in the next level. So let me clarify few of the basic questions first.

Is Polymer Js like MVC frameworks?

Angular Js, Ember Js or other MVC JavaScript frameworks are made to create very complex web applications with very rich features like routing, services, server communications etc. On the other hand Polymer focuses on creating stylish and complex reusable UI components; just like widgets.

Angular and Ember also provide directives and components

Well, though few MVC frameworks also provides features like reusable components, but there is difference with Polymer. Polymer’s base is the DOM. Whatever Polymer creates is native to the DOM. So any Polymer component can be reused across any other framework or even just by itself. Polymer provides you some basic elements, extending which you can make complex and stylish components very easily.

Though Polymer Js helps you to do the above mentioned things, but the problem is polymer uses future apis of browser. Those technologies which has not been introduced to web browsers, even not been standardized by W3C. Those future technologies are called “Web Components”.

Describing Web Components

Web components are the set of few future technologies. Some of them are already provided in super new browsers like chrome, but many of them are even yet to be standardized. Let’s check them one by one.

Mutation Observers:

Mutation observers are used for efficient observation of DOM. If new nodes are added in the DOM tree, if attributes are changed, mutation observers keeps an eye on that. This technology is shifting to new browsers.

Pointer Events:

This is the specification that unifies the event modules for mouse and touch devices. It allows you to write the same code for mobile, as well as desktop devices.

Shadow DOM:

Shadow DOM is probably the most interesting technology provided by polyfill or very modern browsers. Shadow DOM brings encapsulation for the first time in the platform. This can encapsulate HTML, scripts and even css styles which is really amazing and useful.

Custom elements:

This is one of the heavy pillars of web components. It allows you to define your own tags and use them just like any other tags in the browser.

HTML imports:

This feature comes with Custom elements. You can put your custom elements in some separate .html file and call or import that particular file from another html file using <link rel=”import” src=”my-custom-elements.html” />


MDV or Model Driven Views allows direct data binding to HTML. Although this feature isn’t really an emerging standard yet, but hopefully one day it will be.

Web Animations:

Well, the name itself tells what it is. Smooth transitions and animations.

What are Polyfills

Web Components are future technologies, but Polymer Js is present. Then where did it get the web component apis to use? Is polymer compatible only to the super new browsers or the future browsers only?

Nope! Polymer is compatible everywhere. The guys who inject the modern browser technologies to the older ones are called polyfills. Polyfills are a bridge to the future web platform. They take the browser to the future level from where Polymer can start working. When browsers will grow the pollyfills will disappear.

native browser

Browser’s native features

polymer foundation

Filling up browser feature gaps by polyfills

polymer foundation and native

Now Polymer Js can start its work

A Summary on Polymer JS

  • Previously the name was ToolKitchen.
  • With Polymer the framework is the DOM itself.
  • Scoping is provided by Shadow DOM.
  • Polyfills are a bridge to the future web platform.
  • Polyfills focuses on compatibility, not on performance.
  • Web components are awesome, but low level design. That’s why Polymer.
  • Works offline using previous history.

Question answer on Polymer

As Polymer is new, and the article also is for an polymer beginner, so it’s very much certain that you may have few questions in your mind. I’m providing answers for few very common questions; but if you have more you are always welcome to post a comment.

If Polymer is client side, then why to run on server?

Polymer, the library is 100% client side. But there are few limitations of today’s technology. The type “import” of “link” tag is possible only for a server call. That’s why we have to host the files. Once the browsers have native support for the web component “import”, you can work without a server.

Why to use import?

The web world has support to load js, css, video, audio, image and also other files in the html page. But how to load a html to a html? iFrames? Well, iFrames run in a complete separate context. Then using ajax load? Obviously that’s a hack only. So this is the reason behind the birth of “import”.

Why polymer elements has dash ( – ) in their name?

The dash or hyphen in the custom element name is mandatory and it’s not related to polymer. It’s not like only polymer elements need a dash in the name; any web custom element must have it in their name. The reason is, If you are using an , the HTML parser of the browser inherit it from an element ; that’s the reason you don’t find an error in the console and everything runs fine. Now somehow the browser has to know which element is a normal unknown element and which one is a custom element. That’s why the dash is used. If you don’t use a dash, HTML parser will consider it as notmal unknown tag and will inherit from HTMLUnknownElement and your code will break.

Does Polymer use material design?

Probably it’s the first JavaScript library to go with material design. In fact Polymer has a key roll in Google’s material design development as it’s a prototype of that and both the teams (Polymer and Material design) belongs to Google and work very closely.


Polymer Js is philosophy because it influenced the concept of web components. Web components will soon be native to web browsers and polymers will be a significant cause of that. Polymer is giving things to the open web, not like other frameworks who tries to grow by themselves only.
Polymer is the embodiment of material design for the web. The team works closely to the chrome team and material design team. Polymer is the first JS library to go with material design concept and it also helps to material design spects to be better.
May be the polyfills are an overhead of 30/35 KB, but in near future they will also be vanished, the web will be more beautiful will reusable elements, scoped styles, more native DOM based features.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Kristono Sugiarto

    Wow, no comments for this great explanation about Polymer?

    Btw, I’ve been using Polymer and it’s Elements, it is awesome, thank you for this great article! 😀