Dynamically generated html import inside polymer element (version 1.0)
Dynamically generated html import inside polymer element
Does anyone know how to dynamically add html imports to a polymeric element (version 1.0)?
The code below doesn't work and complains that ..
HTML element <link> is ignored in shadow tree.
Does anyone know about 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>
+3
source to share
2 answers
Polymer 1.0 has a utility function importHref(href, onLoad, onError)
on every Polymer component. To import and add your outer element dynamically, you can 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
});
+11
source to share
I'm not sure if you can dynamically add HTML imports and make it work inside another element, but you need to use the Polymer API. See here .
Something like that:
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);
}
});
+1
source to share