What is Google Polymer?


I saw some recent studies on foreign websites about this Google Polymer , but I still don't understand where it should be used, for example in a mobile application.

I didn't find Brazilian blogs or website containing information about Google Polymer.


Polymer is a library that facilitates the creation of Web Components , which are custom, self-contained, and reusable HTML elements.

The idea is that you can create your own components just with HTML, they have a unique and focused behavior.

Let's look at the select element. It has a single purpose: to select one or more item(s) from a list of options . We can configure its behavior with the multiple attribute , but the main purpose remains the same.

The same should happen with the custom google-map element cited in @gtonioli response. It has a single purpose: to show a Google map . In it, we can point from which location we want to see the map according to the lat and long attributes .

It could be that it shows a pin at some location passed by the user, or it shows some route from city to city, or it accepts an attribute, called zoom , which shows the map of past coordinates from a certain distance. As long as the component remains focused on showing a Google map , these features are valid.

To make a web component , the following technologies are used:

  • Custom Elements

    It allows us developers to create elements in addition to those specified in the HTML, registering them before use.

  • shadow DOM

    Allows the creation of elements that are completely decoupled from the current document, which can, for example, contain an ID that already exists in the main document or in another Shadow DOM subtree . The CSS registered in these elements does not cross over into the document.

  • HTML Template

    It allows the creation of templates, which can be slightly compared to those of Underscore.js and lodash , in which an HTML markup is created for future use.

  • HTML Imports

    Let's say it's "a Require.js for HTML implemented by the browser". These are HTML documents that are referenced in another document as an external resource.

As these technologies are still in Working Draft , Polymer contains several polyfills that bring some of these features to browsers, still with some limitations, such as HTML Imports being made by XMLHTTPRequest .

The library facilitates the development of Web Components, making the creation of customized elements less labor intensive , with two-way data binding for component control and the polyfills mentioned above.

For a more comprehensive introduction to Polymer, see these videos (both in English, with English subtitles).

The project website has a quick tutorial for creating Web Components using the library.

Scroll to Top