My goal is to learn to wire up events in a custom element to members of the custom template.
I have follow all of the steps in http://www.polymer-project.org/docs/start/customelements.html ( tutorial 101). This builds the custom element as part of the index.html file. After much frustration I finally got it to work under Chrome and node-webkit. The I tried to cut and paste the code into a separate file and use link-import to load that file. Well it does not work. I have tried many many ways to get a clone of the template so that the clone can be added to the shadowRoot. The failure is occurring in the createdCallback routine that was attached the modified prototype that was passed to the document.registerEvent call. It is in the createdCallback routine that I also attempt to link the listeners to the buttons. It never get that far. Consequently none of the elements appear in the main document (other than unresolved). here is the script I pasted into the import dataset: ---------------------------------------------------------------------------------- <template id='column-item'> <style scoped> .ci-empty { font-family: courier; font-style: normal; font-weight: normal; color: black; background-color: white; padding: 5px; border: 0px; } .ci-selected { font-family: courier; font-style: normal; font-weight: normal; color: black; background-color: yellow; padding: 5px; border: 0px; } </style> <input id='col_data' type="text" class="ci-empty" placeholder='yes'></input> <input id='my_btn' type='button' value='click it'></input> </template> <script> var p = Object.create(HTMLElement.prototype); var showInDom = function() { var shadow = this.createShadowRoot(); this._root = shadow; var template = document.querySelector('column-item'); var clone = template.content.cloneNode(true); shadow.appendChild(clone); // initial_listeners(shadow); }; p.createdCallback = showInDom; p.attachedCallback = function() { }; p.detachedCallback = function() { }; document.registerElement('column-item',{prototype: p}); </script> -------------------------------------------------------------------------------------------------------------- I am using node-webkit for this debugging. It is quicker than chrome inspect. (I have tried document.$.<element_name>. This does not work!) The link-import works - I have removed "console.log" lines that I use for debugging. I can see their messages in the develop Any help is appreciated. Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/e1f69b52-4126-4ffa-96e4-517cbfc639f1%40googlegroups.com. For more options, visit https://groups.google.com/groups/opt_out.
