title: Use external scripts inside a Polymer element
body: <p>What is the recommended way to "require" external javascript inside of a Polymer element?  For instance, I'm building a video group component that I want to display inside of a <a href="https://github.com/kenwheeler/slick/" rel="nofollow noreferrer">Slick</a> carousel.</p>
  
  <p>For instance, my code might look like this for the custom element:</p>
  
  <pre><code>&lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html"&gt;
  
  &lt;polymer-element name="polymer-video-group"  constructor="VideoGroupElement" attributes=""&gt;
    &lt;template&gt;
      &lt;style&gt;
        /* styles for the custom element itself - lowest specificity */
        :host {
            display: block;
            position: relative;
        }
        /* 
        style if an ancestor has the different class
        :host(.different) { } 
        */
      &lt;/style&gt;
  
      &lt;!-- Load Data with JSONP Endpoint (in this case Google Spreadsheets)
          Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&amp;usp=sharing
          https://docs.google.com/spreadsheets/d/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/pubhtml
      --&gt;
      &lt;polymer-jsonp id="jsonp" url="https://spreadsheets.google.com/feeds/list/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/od6/public/values?alt=json-in-script&amp;callback=" response="{{response}}"&gt;&lt;/polymer-jsonp&gt;
  
      &lt;template repeat="{{entry in response.feed.entry}}"&gt;
        &lt;iframe width="420" height="315" src="//www.youtube.com/embed/{{entry.gsx$id.$t}}" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/template&gt;
  
    &lt;/template&gt;
    &lt;script&gt;
      Polymer('polymer-video-group', {
  
          // element is fully prepared
          ready: function(){
              this.$.jsonp.go();
          },
  
          // instance of the element is created
          created: function() {
            this.videos = [];
            this.response = {};
          },
  
          // instance was inserted into the document
          enteredView: function() { },
  
          // instance was removed from the document
          leftView: function() { },
  
          // attribute added, removed or updated
          attributeChanged: function(attrName, oldVal, newVal) { },
  
          // Response from JSONP Data Changed Event Handler
          responseChanged: function() {
  
              // Get the Entry Point for the JSON Feed
              var entries = this.response.feed.entry;
  
              // Create an empty variable to store the video group
              var videos = [];
  
              // Push entries from the JSON feed onto the videos array
              for (var i = 0, entry; entry = entries[i]; ++i) {
                  videos.push({
                      name: entry.gsx$name.$t,
                      id: entry.gsx$id.$t
                  });
              }
  
              // Set the video group object's array to this newly supplied video array
              this.videos = videos;
          }
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>But, rather than just displaying each video inside an iframe, I want those to appear in a carousel, powered by Slick, so I'm envisioning doing something vis-a-vis the following:</p>
  
  <pre><code>&lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html"&gt;
  &lt;script src="../bower_components/slick-carousel/slick/slick.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Do I have to create a custom element that wraps the functionality of slick or can I directly use the assets like the above example?</p>
  
  <p>UPDATE:
  I created an "elements/slick-import.html" file that includes the 3 things Slick needs:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick.css"/&gt;
  &lt;script src="../bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="../bower_components/slick-carousel/slick/slick.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>In my elements/video-group.html element, I reference it as such:
      ...
      
      ...</p>
  
  <p>I notice that the  of the page contains the slick.css file, but the other 2 js files Slick requires are not being attached to the DOM when the page loads.  Am I referencing the included scripts correctly in slick-import.html?</p>
  
  <p>UPDATE 2: 
  Here's my real issue:  I have this repeating template that prints out the video list that I construct from my jsonp response:</p>
  
  <pre><code>&lt;div id="carousel"&gt;
    &lt;template repeat="{{video in videos}}"&gt;
      &lt;div&gt;
        &lt;iframe width="420" height="315" src="//www.youtube.com/embed/{{video.id}}" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But what is tripping up is that the resultant DOM in Chrome DevTools shows the markup as such:</p>
  
  <pre><code>&lt;video-group&gt;
    &lt;div id="carousel" class="slick-initialized slick-slider"&gt;
      &lt;template repeat="{{video in videos}}"&gt;&lt;/template&gt;
  
      &lt;div&gt;
        &lt;iframe width="420" height="315" src="//www.youtube.com/embed/Fp1wPwszF9M" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;iframe width="420" height="315" src="//www.youtube.com/embed/H-l2cq-MXUs" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  
      &lt;div class="slick-list draggable" tabindex="0" style="padding: 0px 50px;"&gt;
        &lt;div class="slick-track" style="width: 0px; -webkit-transform: translate3d(-832px, 0px, 0px); opacity: 1;"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Load Data with JSONP Endpoint (in this case Google Spreadsheets)
         Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&amp;usp=sharing
         https://docs.google.com/spreadsheets/d/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/pubhtml
    --&gt;
    &lt;polymer-jsonp id="jsonp" url="https://spreadsheets.google.com/feeds/list/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/od6/public/values?alt=json-in-script&amp;amp;callback=" response="{{response}}"&gt;&lt;/polymer-jsonp&gt;
  &lt;/video-group&gt;
  </code></pre>
  
  <p>Notice how the div#carousel has a class of "slick-initialized" and "slick-slider".  This means that my Slick Carousel is properly acting on my div#carousel DOM element, but because of the lingering template tag nested underneath, that is tripping up Slick from having some nice clean simple DIVs to act upon, like the example in the <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick docs</a> demonstrates:</p>
  
  <pre><code>&lt;div class="your-class"&gt;
    &lt;div&gt;your content&lt;/div&gt;
    &lt;div&gt;your content&lt;/div&gt;
    &lt;div&gt;your content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there anyway I can workaround this, either through a Polymer-specific method or modify Slick somehow to target only child divs underneath div#carousel?</p>