Polymer HTML Import into Custom Element

Question

Hey I'm beginning with Webcomponents and I built a little HTML Import Example, where I import a calander from another Website with VanillaJs and it works perfekt.

As the 2. Step I wanted to HTML import into a Polymer element, so that I can use the element over and over again. Here is my code:

<link rel="import" href="http://www.testsite.com">
<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="event-calendar-element">
    <template>
        <div id="container" style = "width:220px;"></div>
    </template>

            <script>
                var owner = document._currentScript.ownerDocument;
                var link = owner.querySelector('link[rel="import"]');
                var content = link.import;
                var container = document.getElementById('container');

                var el = content.querySelector('.slider-teaser-column');

                container.appendChild(el.cloneNode(true));
            </script>

</polymer-element>

In the other HTML document I use the custom element and I can see, that the import worked(the resources from testsite.com are loaded), but my Polymer element has no shadowDOM - the imported and selected element is not appended to my <event-calendar-element> :/

the container <div> is null and therefore the following error occurs: Cannot read property 'appendChild' of null

Any help appreciated ;)

Answer 1

The <div> is inside the <template> and since you're not using Polymer() you'd need to use template.content.querySelector() get at and modified it's content. Instead, you can do this in Polymer:

<link rel="import" href="http://www.testsite.com" id="fromsite">
<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="event-calendar-element">
<template>
  <div id="container" style="width:220px;"></div>
</template>
<script>
(function()
  var owner = document._currentScript.ownerDocument;

  Polymer({
    ready: function() {
      var content = owner.querySelector('link#fromsite').import;

      var el = content.querySelector('.slider-teaser-column');

      this.$.container.appendChild(el.cloneNode(true));
    }
  });

})();
</script>
</polymer-element>