Dynamically created html import inside a polymer e

Question

Dynamically created html import inside a polymer element

Does anyone know how to dynamically add a html import into a polymer element (version 1.0)?

The code below doesn't seem to work and complains that the.. HTML element <link> is ignored in shadow tree.

Does anyone know any way around this or know a better way?

<!-- here is where the created import could go -->

<dom-module id="my-component">

<!-- here is where I'd ideally like the import to be created -->

  <template>
    <div id="container">

      <!--This is where my dynamically loaded element should be placed-->

    </div>
  </template>

  <script>
    Polymer({is:'my-component',
      attached: function(){

        var importElem = document.createElement('link');
        importElem.rel = 'import';
        importElem.href = '/components/my-dynamic-sub-component.html';
        this.root.appendChild(importElem);
        var app = document.createElement('my-dynamic-sub-component');
        this.$.container.appendChild(app);

      }
    });
  </script>

</dom-module>

Answer 1

I am not sure if you can dynamically add an HTML import and get it to work inside another element but you need to use Polymer's DOM API. See here.

Something like this:

Polymer({is:'my-component',
  attached: function(){

    //create element and add it to this 
    var importElem = document.createElement('link');
    importElem.rel = 'import';
    importElem.href = '/components/my-dynamic-sub-component.html';
    Polymer.dom(this.root).appendChild(importElem);
    var app = document.createElement('component-controler');
    Polymer.dom(this.$.container).appendChild(app);
  }
});

Answer 2

Polymer 1.0 has the utility function importHref(href, onLoad, onError) on every Polymer component. To dynamically import and add your external element you could use this code:

this.importHref('path/to/page.html', function(e) {
  // e.target.import is the import document.
  var newElement = document.createElement('new-element');
  newElement.myProperty = 'foo';

  Polymer.dom(this.$.container).appendChild(newElement);  
}, function(e) {
  // loading error
});