Understanding the constructor attribute in Polymer elements

polymer

Solution

I guess you have to wait for the polymer-ready event, so that the constructor is available in the global `window` object http://jsbin.com/kosuf/2/edit?html,console,output:

<script>
  document.addEventListener('polymer-ready',function() {
  var book = new BookTemplate();  
    if (book) {
      console.log('Ok');
    }
  });
</script>

Problem

A Polymer noob... I'm trying to create a custom element as per the Polymer API docs, where my main page looks like this: ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Polymer</title> <script src="bower_components/platform/platform.js"></script> <link rel="import" href="bower_components/polymer/polymer.html"> </head> <body> <div id="test"></div> <polymer-element name="book-template" constructor="BookTemplate" noscript> <template> <style> h1 { color: orange; } </style> <h1>Hello from some-foo</h1> </template> </polymer-element> </body> </html> ``` I know that the page content will render if I just put `<book-template></book-template>` on the page, or if I do something like this inside the `<body>` tag: ``` <script> var book = document.createElement('book-template'); document.getElementById('test').appendChild(book); </script> ``` But I'm trying to utilize the element's constructor attribute, assuming that this will create the element when placed somewhere inside of `<body>`: ``` <script> var book = new BookTemplate(); </script> ``` ...but getting a console message that BookTemplate() is not defined. I'm sure it's something simple...any idea? Thanks in advance.

Original source