title: How to share functionality between Polymer elements in the right way?
body: <p><a href="https://www.polymer-project.org/1.0/docs/devguide/behaviors" rel="nofollow">Polymer behaviors</a> are great. But sometimes I need to share a single function/method across multiple elements. I don't need lifecycle callbacks, declared properties, etc that comes with behaviors. </p>
  
  <p>I do not know the architecture of Polymer well enough to know:</p>
  
  <ol>
  <li>the best way and place (in life-cycle callbacks?) to add shared methods to custom elements</li>
  <li>when it is better to extend the <code>Polymer.Base</code>? </li>
  </ol>
  
  <p><strong>Example 1:</strong></p>
  
  <p>Let's say we want to add a method for lazy-listening that will attach event listeners to elements <code>afterNextRender</code>:</p>
  
  <pre><code>Polymer.RenderStatus.afterNextRender(this, function() {
      // add event listeners
  });
  </code></pre>
  
  <p>As Monica explains in <a href="https://youtu.be/zfQoleQEa4w?t=23m30s" rel="nofollow">Practical lessons from a year of building web components - Google I/O 2016</a> Polymer's <code>listeners</code> object should be avoided for elements that might be created in large numbers.</p>
  
  <p><strong>Example 2</strong></p>
  
  <p>Following her example, now we want to add ripple effects or control behaviors to elements only when they are hovered/active/focused and remove it when otherwise. This functionality will be needed by many elements.</p>
  
  <p><strong>Example 3, functions from external libraries such as lodash</strong></p>