Slick Modular Web Components with Polymer
As a primarily back-end focused developer, I admit that sometimes I find user interface work pretty tedious, especially when I can’t get something to look or behave the way I feel it should. On large projects, stylesheets can get cluttered and I have a bad habit of throwing everything into a single “site.css” file that gets loaded into every page. I wind up with dozens of CSS classes and identifiers to make sure that each component of my website has its own specialized styling and doesn’t accidentally inherit the styles of something else. Usually, the look and feel of my site is at the mercy of whatever CSS library I’m using.
1. Hundreds of plug-and-play elements
2. Custom elements
If you can’t find the right element to suit your needs, Polymer gives you the tools to build your own elements. Elements have encapsulated style, form and function, meaning you can detail specifically how an element is to look and behave. Polymer elements contain methods and properties that can be called from other elements in the DOM. This makes your components feel more like extensible objects, rather than simple UI elements.
3. Class-like inheritance
If you have a shared functionality or style among a number of elements, you definitely don’t want to repeat that code. Fortunately, Polymer allows you to inherit multiple styles and behaviors into elements. Instead of re-writing a particular function for each of your elements, you can instead write that function as a behavior, and have each element extend it. Similarly, if you wish for a family of custom elements to use the same CSS properties, you can import one or many custom style elements. These elements enable easy theming, allowing you to change the appearance of your application simply by swapping style elements.