CODEWITHSUNDEEP
javascriptpolymerpolymer-2.x
risingtiger
risingtiger

Reputation: 879

Best Practice in separating javascript from HTML in Polymer 2.0 components

The typical code example given for a Polymer 2.0 project looks like this:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id='component-name'>
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <slot></slot>
  </template>
  
  <script>
    class ComponentName extends Polymer.Element {
      static get is() { return 'component-name'; }
    }
    
    window.customElements.define(ComponentName.is, ComponentName);
  </script>
</dom-module>

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.

I've come up with this solution:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id='component-name'>
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <slot></slot>
  </template>
  
  <script type='module' src='./componentname.js'></script>
</dom-module>

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).

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?

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.

(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.

Upvotes: 1

Views: 1067

Answers (2)

crazypeter
crazypeter

Reputation: 1449

Here is how to externalize JS and CSS.

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="your-element">
  <link rel="import" type="css" href="your-element.css">
  <template>
  </template>
  <script type="text/javascript" src="your-element.js"></script>
</dom-module>

Your class gets defined in the global scope and the JS files gets imported only once because of the HTML import deduping. When executing the JS code, it will find the corresponding <dom-module>. Also, don't forget

customElements.define(YourElement.is, YourElement);

in your JS file. Note that <script ...> can be inside or outside the <dom-module>, and the CSS imports must be outside the template. The script will be loaded when the HTML file is loaded. Here is some info on lazy loading elements.

Upvotes: 2

OneBitAhead
OneBitAhead

Reputation: 81

Looking at this from another perspective: Polymer 2.0 elements can implement a static getter method named template, so you can seperate out the HTML part like this:

class SeperateMarkup extends PolyElement {

    ...

  static get is() { return 'seperate-markup-el'; }

  static get template() {       
    // Maybe, have a look at 
    // Polymer.DomModule.import(SeperateMarkup.is, 'template');
    // to retrieve markup 

    return "<h1>someMarkup</h1>";
  }

    ...

}

Recommended read on this and other Polymer 2.0 aspects: Monica Dinculescus examples on https://glitch.com/edit/#!/aspiring-chauffeur?path=views/index.html:1:0

Upvotes: 1

Related Questions