Web applications are becoming increasingly complex, and as HTML is asked to accomplish user interface miracles it was never designed for, the language that structures the web’s documents is showing its rough edges. HTML itself has a limited number of native UI elements like tables. Creating new ones often involves copy-pasting huge chunks of code or using complex frameworks, the guts of which most developers have little understanding of.
In an excellent article on web components, Rob Dodson uses the standard <video> tag to exemplify how Web components benefit developers. When we use the video tag, we usually just wrap our media within the <video> tag, and we get a video player along with scrubbing controls, a playback control, a volume slider, and timecodes. All of this comes for “free” and isn’t visible in the page’s code. That doesn’t mean the code to build these elements doesn’t exist. It does exist — in the Shadow Dom.
Web Components allow us to do the same with any UI element. We can push its complexity into the Shadow Dom, and because of the barrier between the Shadow DOM and the “real” DOM, that component is reusable anywhere within a site without impacting or being impacted by the page’s content. We get true encapsulation and separation of concerns on the web.
All of which sounds great, but Web Components suffer from a few drawbacks. They’re not easy to use. Building custom components from the primitives provided by Web Components is time-consuming. And browser support isn’t as widespread as might be hoped.
This is where Polymer comes in. Polymer is a library that builds on top of Web Components and makes it much easier to build custom interface components — it even comes with a number of custom web components that developers can drop straight into their pages. It also offers better cross-browser support. Developers often prefer to work with Polymer because it gives them all the advantages of Web Components — reusable, encapsulated custom components for web application UIs — without the complexity of working directly with the less-than-intuitive low-level tools provided by Web Components.