Polymer 1.0 cannot access elements inside a nested <template> element

Question

I am using Polymer 1.0 and I am creating a small example of an accordion. I have the data binding to the accordion text in order, I just want to change the accordion icon when I click it.

Below is my code

<dom-module id="ab-accordion"> <template> <iron-ajax auto handle-as="json" on-response="handleResponse" debounce-duration="300" id="ajaxreq"></iron-ajax> <template is="dom-repeat" id="accordion" items="{{items}}" as="item"> <div class="accordion" on-click="toggleParentAcc"> <div id="accordion_header" class="accordion__header is-collapsed"> <i class="icon icon--chevron-down"></i> <span>{{item.name}}</span> </div> <div id="standard_accordion_body" class="accordion__body can-collapse"> <div class="accordion__content"> <content id="content"></content> </div> </div> </div> </template> </template> <script> Polymer({ is: "ab-accordion", //Properties for the Element properties: { accordian: Object, childaccordions: Object, // Param passed in from the element - Set if the accordion is open by default. open: String, data: String, reqUrl: { type: String, value: "https://example.com/service.aspx" }, }, ready: function () { this.items = []; }, attached: function () { // Run once the element is attached to the DOM. }, toggleParentAcc: function (event) { // Toggle the classes of the accordions //This is where I want to toggle the class this.$.accordion_header.classList.toggle('is-collapsed'); if (typeof event !== 'undefined') { event.stopPropagation(); // Stop the click from going up to the parent. } }, handleResponse: function (e) { this.items = e.detail.response.sports; } }); </script> </dom-module> 

Basically inside the toggleParentAcc function toggleParentAcc I want to switch the div class with the identifier accordion_header . But I just get undefined or null.

I tried the following two lines:

 this.$.accordion_header // #1 this.$$('#accordion_header') // #2 

How can I access this element inside dom-repeat?

UPDATE: I can't even access the elements inside when inside the attached function.

 attached: function(){ this.$.accordion_header // This is null?! this.$$('#accordion_header'); // this is also null! } 

Answer 1

https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#node-finding

Note. Nodes created dynamically using data binding (including in dom-repeat and dom-if patterns) are not added to this. $ hash. The hash includes only statically created local DOM nodes (that is, nodes defined in the outermost element template).

I think it would be better if you used Polymer.dom(this.root) . I would also advise you not to use static identifiers in dom-repeat , since they must be unique. Use classes instead.

Answer 2

It looks like you are faced with event retargeting , which happens when events “bubble up” along the way up the DOM tree. Read this documentation to find out more.

When I came across this, I solved it using something like:

 var bar = Polymer.dom(event).path[2].getAttribute('data-foo'); 

inside my Polymer() function.

To understand this in your case, you have to go to the console and search the DOM tree / event log to find the target. If you are having trouble finding the right area of ​​the console, post a comment and I may be able to help further.

Answer 3

In the end, I figured out a way to do this without having to select elements in a nested template.

 <template id="accord_template" is="dom-repeat" items="{{items}}" as="item"> <ab-accordion-row id="[[item.id]]" name="[[item.name]]" open="[[item.open]]"> </ab-accordion-row> </template> 

ab-accordion is another element, I just pass the data to it, and then I can change the classes based on the parameters.

  <div id="accordion" class="accordion" on-click="toggleAccordion"> <div class$="{{getClassAccordionHeader(open)}}"> <i class="icon icon--chevron-down"></i> <span>{{name}}</span> </div> <div id="standard_accordion_body" class$="{{getClassAccordionChild(open)}}"> <div class="accordion__content"> <content></content> </div> </div> </div> 

Answer 4

try with this one.

 toggleParentAcc: function (event) { // Toggle the classes of the accordions //This is where I want to toggle the class var header = event.target.parentElement; Polymer.dom(header).classList.toggle('is-collapsed'); // rest of your code }