Google Polymer is more than just a polyfill for Web Components. It has an ambitious agenda for pushing the Web Components specifications forward and lead the web development community in that area. In this post, we will explore what Google Polymer has to offer: polyfills, a framework, and pre-built elements. Although the polyfills portion will go away once browsers catch up to the Web Components spec, what is left behind is an interesting framework and suite of components.
Web Components: A Shiny New You
Web Components will completely change the way we code for the web. To demonstrate this, I will be creating a new HTML tag called “<basem-emara>” that will act as my own personal vCard.
HTML Imports is the New Dependency Management for the Web
Managing dependencies is baked into many languages and is a cornerstone to creating modular architectures. Now, HTML joins the ranks and will also offer dependency management. Introducing HTML Imports!
Encapsulating HTML with Shadow DOM
Encapsulation is a very welcomed feature for HTML. This has been made possible with the introduction of Shadow DOM. Conflicts will be reduced tremendously and 3rd party libraries will play nicely with each other. In this post, I would like to focus on Shadow DOM and what it can do.
HTML5 Template Tags, Data-Binding, and Standards
Did you know there’s a shiny new <template> tag making it to a browser near you? It’s true! For years, web developers have been coming up with awkward and clever hacks to do client-side templating. With the new Web Component specs, the templates piece is now included natively!
Extend Native DOM Elements Using Web Components
Web developers love inheritance, don’t you? Who would have thought you can inherit something so basic as an HTML element and extend it! Now you can do this using the new Web Components specifications.
Getting Started with Web Components
With HTML5 came the introduction of semantic tags. Content could now be wrapped within much more appropriately named tags such as: