javascript - Dynamically Load HTML page using Polymer importHref -

i'm writing simple element loads html files using polymer 1.0's helper function importhref(). page loads in, instead of html rendering page, i'm getting [object htmldocument].

when log successful callback, imported page wrapped in #document object (not sure on terminology here). but, info there in console.

so, question is: how render html page?

element:

<dom-module id="content-loader">  <template>     <span>{{filecontent}}</span> </template>  <script>  polymer({      is: "content-loader",      properties: {         filepath: {             type: string         }     },      ready: function() {         this.loadfile();     },      loadfile: function() {         var baseurl;          if (!window.location.origin)         {             baseurl = window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');         }         else         {             baseurl = window.location.origin;         }          //import html document , assign filecontent         if(this.filepath)         {             this.importhref(baseurl + this.filepath, function(file){                 this.filecontent = file.target.import;                 console.log(this.filecontent); //logs fine             },             function(error){                 console.log(error);             });         }     }  });  </script> 

in use:

<content-loader file-path="/app/general/contact.html"></content-loader> 

<span>{{filecontent}}</span> render filecontent cast string, why see [object htmldocument] (which when call tostring() on document object).

just in general, polymer won't let bind html or node content because it's security risk.

the filecontent have document, means it's collection of dom nodes. how use document depends on content loaded. 1 way render nodes append filecontent.body onto local dom, so:

polymer.dom(this.root).appendchild(this.filecontent.body);

here more complete example (http://jsbin.com/rafaso/edit?html,output):

<content-loader file-path="polymer/bower.json"></content-loader>  <dom-module id="content-loader">    <template>     <pre id="content"></pre>   </template>    <script>      polymer({       is: "content-loader",       properties: {         filepath: {           type: string,           observer: 'loadfile'         }       },        loadfile: function(path) {         if (this.filepath) {           console.log(this.filepath);           var link = this.importhref(this.filepath,              function() {               polymer.dom(this.$.content).appendchild(link.import.body);             },             function(){               console.log("error");             }           );         }       }     });    </script> </dom-module>