Polymer: calling a dynamic custom element's method from another script - polymer

Question

i'm trying to call a dynamic custom element's method. It works only when the call is made inside the script tag of the custom element's html file. But when call is made in another custom element's script tag or in the script tag of index.html, i get the error: 'method-name' not a function in the console. Thanks for your response. for context, here is a snippet
// in my custom element html file
....
<script type="text/javascript">
Polymer( {
is: "my-new-view",
toggleContent: function() {
this.$.collapse.toggle();
},
insertContent: function (userContent) {
console.log("inserting userContent...");
}
});
</script>
</dom-module>
</html>
Now in another file my-app.html
...
<link rel="import" href="my-new-view.html">
...
<dom-module is="my-app">
...
<script>
...
// i want to test my-new-view. insertContent() here.
var dynamicView = document.createElement('my-new-view');
// in the following line i get the error insertContent is
// not a function
dynamicView.insertContent();
</script>
</dom-module>
pls help. what am i doing wrong. i tried the last 2 lines of javascript in my index.html as well but i get the same error. Thanks.


Answer 1

I think that maybe you're trying to call that method too early, when the elements have not been registered yet.
In index.html you can wrap you code in handler of WebComponentsReady event
window.addEventListener('WebComponentsReady', function(e) {
document.createElement('my-new-view').insertContent();
});
In other Polymer elements you could move your code inside of the my-app element rather than directly in the script.
Also, to check whether a custom element is available I look at document.createElement('my-new-view').constructor. If it says function HTMLElement() { [native code] } (in Chrome), it means that it's not available (usually an import is missing).