title: Best Practice in separating javascript from HTML in Polymer 2.0 components
body: <p>The typical code example given for a Polymer 2.0 project looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="import" href="../../bower_components/polymer/polymer-element.html"&gt;
  
  &lt;dom-module id='component-name'&gt;
    &lt;template&gt;
      &lt;style&gt;
        :host {
          display: block;
        }
      &lt;/style&gt;
      &lt;slot&gt;&lt;/slot&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
      class ComponentName extends Polymer.Element {
        static get is() { return 'component-name'; }
      }
      
      window.customElements.define(ComponentName.is, ComponentName);
    &lt;/script&gt;
  &lt;/dom-module&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to separate out the javascript, so that the ComponentName is written in a separate file, thus keeping my linters happy and my sanity in check while working on large projects. </p>
  
  <p>I've come up with this solution:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="import" href="../../bower_components/polymer/polymer-element.html"&gt;
  
  &lt;dom-module id='component-name'&gt;
    &lt;template&gt;
      &lt;style&gt;
        :host {
          display: block;
        }
      &lt;/style&gt;
      &lt;slot&gt;&lt;/slot&gt;
    &lt;/template&gt;
    
    &lt;script type='module' src='./componentname.js'&gt;&lt;/script&gt;
  &lt;/dom-module&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The only difference is that I'm now loading the file from a separate file as a script type='module' (so that I can also import other js files in to that).</p>
  
  <p>It appears to work, but I'm not sure its really the best thing to do. For one, I'm not sure what scope the class ComponentName is being defined in and if there may be conflicts. But, more importantly, I'm not sure how the loading sequence happens. Does the script load on instantiation of the app instead of through lazy loading? </p>
  
  <p>Is there some one out there versed in the Polymer world that has experience with this sort of thing and has an idea of best practices in separating out js logic from the the HTML while setting up components? Or, is the solution I've lined out sufficient? Also, any references to learn more about the dynamic load process Polymer goes through would be beneficial. </p>
  
  <p>(and I do know that Polymer 3.0 may solve this problem with es6 modules), but unfortunately I can't wait until it comes out.</p>