How to add a click listener to polymer custom element's child? <p>I am trying to add a click listener to one of the buttons inside a custom element in the <strong>"created"</strong> life cycle callback (even tried <strong>"ready"</strong> callback with same result).</p> <p>I am thrown with the error "button element is undefined/null". </p> <hr> <p><strong>Note:</strong></p> <p>a. I cannot add a click listener for the whole custom component like this. </p> <pre><code> listeners: { 'click': '_onClick' }, </code></pre> <p>I just need to add a listener to the button. How to get this simple thing? Sorry I am sounding naive. </p> <p>b. Cannot do inline script because of CSP restriction</p> <pre><code>&lt;paper-button id='saveBtn' on-click="handleClick"&gt; Save &lt;/paper-button&gt; </code></pre> <hr> <p><strong>Error Msg:</strong></p> <blockquote> <p>Uncaught TypeError: Cannot read property 'addEventListener' of null</p> <p>Polymer.created @ elements-imports.csp.js:10596Polymer.Base._addFeature._invokeBehavior @ elements-imports.csp.js:267Polymer.Base._addFeature._doBehavior @ elements-imports.csp.js:262Polymer.Base.createdCallback @ elements-imports.csp.js:97Polymer.Base._addFeature.instanceTemplate @ elements-imports.csp.js:535Polymer.Base._addFeature._stampTemplate @ elements-imports.csp.js:531Polymer.Base._addFeature._initFeatures @ elements-imports.csp.js:4627Polymer.attached @ elements-imports.csp.js:5612Polymer.Base._addFeature._invokeBehavior @ elements-imports.csp.js:267Polymer.Base._addFeature._doBehavior @ elements-imports.csp.js:262Polymer.Base.attachedCallback @ elements-imports.csp.js:102Polymer.Base._addFeature.attachedCallback @ elements-imports.csp.js:603Polymer.Base._addFeature._readySelf @ elements-imports.csp.js:591(anonymous function) @ elements-imports.csp.js:5554Polymer.ImportStatus._importsLoaded @ elements-imports.csp.js:5553(anonymous function) @ elements-imports.csp.js:5564checkDone @ webcomponents-lite.js:968watchImportsLoad @ webcomponents-lite.js:990(anonymous function) @ webcomponents-lite.js:939whenDocumentReady @ webcomponents-lite.js:957checkReady @ webcomponents-lite.js:952</p> </blockquote> <hr> <p><strong>Custom Element:</strong></p> <pre><code>&lt;dom-module id="my-form"&gt; &lt;template&gt; &lt;div&gt; &lt;paper-input id="inputName" label="Name" required error-message="Required Input"&gt; Name &lt;/paper-input&gt; &lt;paper-input id="inputServer" label="Server URL" required error-message="Required Input"&gt; Server &lt;/paper-input&gt; &lt;paper-input id="inputUsername" label="Username" required error-message="Required Input"&gt;Username&lt;/paper-input&gt; &lt;paper-input id="inputPassword" label="Password" type="password" required error-message="Required Input" value=""&gt;Password&lt;/paper-input&gt; &lt;div class="rows layout horizontal right-justified certificate"&gt; &lt;paper-button id='cancelBtn' tabindex="0"&gt;Cancel&lt;/paper-button&gt; &lt;paper-button id='saveBtn' tabindex="0"&gt;Save&lt;/paper-button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;/dom-module&gt; &lt;script&gt; Polymer({ is: 'my-form', created: function() { var saveBtn = document.querySelector('#saveBtn'); saveBtn.addEventListener('click', function() { document.getElementById('inputName').validate(); document.getElementById('inputServer').validate(); document.getElementById('inputUsername').validate(); document.getElementById('inputPassword').validate(); }); }, }); </code></pre>