This article originally appeared on the Divshot blog. Divshot is a developer-focused platform for deploying modern front-end applications. It was also started with Intridea’s support by Michael Bleigh!
There’s so much new ground to cover with Web Components and Polymer that oftentimes some of the smaller conveniences are overlooked. Here are some of the cool things Polymer can do (or does for you) that you might not have noticed.
Built-In Element Methods
You may have used fire() to trigger custom events from a Polymer element, but that’s not the only convenient little method that’s available.
async(fn, inArgs, inTimeout) allows you to delay the execution of code (similar to setTimeout or requestAnimationFrame) while keeping this bound appropriately. It comes in handy for things like allowing an event to fully propagate before performing a dependent action.
// executes at the next micro-task checkpoint this.async(function() { this.$.request.go(); }) job(jobName, fn, inTimeout) gives you the ability to limit how frequently an action is performed. Jobs are only executed after inTimeout milliseconds have passed without the same job being called again. You might have heard of this pattern as debounce. It’s great for handling things like listening for noisy event streams like keystrokes or mouse movements.
// executes when it hasn't been called for 750ms this.job('keyup', function() { this.fire('save'); }, 750); Layout Attributes
If you’ve browsed through Polymer examples and source, you might have come across attributes like layout, center, or flex sprinkled here and there. Polymer ships with declarative attributes that let you quickly and easily create complex layouts using CSS Flexbox.
Let’s say I want to create a mobile-friendly layout with a header, footer, and content area.
<body fullbleed layout vertical> <header>This will be at the top</header> <main flex>This will fill available space</main> <footer>This will be at the bottom</footer> </body> There’s quite a bit to this, and the official documentation does a great job of laying it out.
Auto-Binding Templates
Polymer’s template binding is powerful stuff, but what if you want to use it outside the context of an element’s Shadow DOM? Well, then it’s auto-binding to the rescue!
The auto-binding template is an extension of the <template> tag that automatically binds the element itself as the model.
{% raw %} <template id="greeter" is="auto-binding" repeat="{{name in names}}"> <p>Hello, {{name}}, how are you today?</p> </template> <script> document.querySelector('#greeter').names = ["Alice", "Brenda"]; </script> {% endraw %} Because auto-binding templates can exist in the Light DOM (anywhere on the page, really) and don’t depend on a user-defined custom element, they come in quite handy on occasion.
Attribute Reflection
Polymer makes it dead easy for attributes defined in the source code to configure properties on the DOM node, but did you know it goes both ways? By using a special form of published in your element definition, you can make it so that the attribute values change to match changing properties.
<polymer-element name="two-way"> <script> Polymer('two-way', { published: { name: { value: 'Bob', reflect: true } } }); </script> </polymer-element> If you were to use the above element in your page and changed the name property in JavaScript, the name attribute in the web inspector would change, too. Cool stuff!
Polymer is a library that keeps surprising me with how deep and well-designed it is (without even mentioning all of the core and paper custom elements!). It’s way more than just a set of polyfills.
Have any Polymer hidden gems of your own you’d like to share? Let us know!
