Hi Aleem, To find out when your custom element's (light DOM) children are manipulated, you can use a mutation observer. Polymer provides a convenience method for setting this up, described here:
https://www.polymer-project.org/docs/polymer/polymer.html#onMutation You can access the children all the usual ways, but if you're specifically looking for the children that get distributed through your insertion point (<content> element), the content element provides a getDistributedNodes() method. This is discussed in the FAQ: https://www.polymer-project.org/resources/faq.html#accessContentDOM Thanks, Arthur On Wed, Jan 7, 2015 at 10:59 PM, Aleem Mawani <[email protected]> wrote: > Thanks so much! That was very helpful. > > One follow up question, this does not handle the case where more content > nodes are added after the element is initialized. Tried to find the answer > to this in the docs to no success. > > As for the question of what does creating this custom element buy me, you > might be right in that there doesn't seem to b huge benefits in this case. > The way I posted the code had some simplifications to what I'm doing and > I'd like to encapsulate the extra functionality in my custom element. > > Even without that extra functionality I might still do it, as I'd be using > this custom element many times on a single page and its half the lines of > markup and easier to read when encapsulated in the custom element. > > > > > > On Wed Jan 07 2015 at 7:05:59 PM Dennis Coldwell < > [email protected]> wrote: > >> Oh, my apologies Aleem! I thought you were pulling some arbitrary set of >> links from a datastore or something. Sorry that I misread your intent. >> >> You can still use the Polymer's template data binding in this case, it >> cleans up the javascript and makes the custom element more readable (IMHO), >> here's the code snippet to show what I mean: >> >> <link rel="import" href="/assets/bower_components/polymer/polymer.html"> >> <link rel="import" >> href="/assets/bower_components/core-pages/core-pages.html"> >> <link rel="import" >> href="/assets/bower_components/paper-tabs/paper-tabs.html"> >> >> <polymer-element name="code-file-set"> >> <template> >> >> <paper-tabs style="max-width:{{tabBarWidth}}px" id="tabs" >> selected={{selected}}> >> <template repeat="{{ tab in tabNames }}"> >> <paper-tab>{{tab}}</paper-tab> >> </template> >> </paper-tabs> >> >> <core-pages selected="{{selected}}"> >> <content id="codecontent" select="a"></content> >> </core-pages> >> </template> >> >> <script> >> >> Polymer('code-file-set', { >> domReady: function() { >> var codeNodes = this.$.codecontent.getDistributedNodes(); >> this.tabNames = []; >> >> for (var i = 0; i < codeNodes.length; i++) { >> this.tabNames.push(codeNodes[i].getAttribute('tabTitle')); >> } >> >> this.selected = 0; >> this.tabBarWidth = codeNodes.length * 250; >> }, >> }); >> </script> >> </polymer-element> >> >> You can see that I've replaced your javascript createElement and >> appendChild lines with a simple push to an array which can be used by >> Polymer's template binding. Does that make sense? I like this approach >> because I can see exactly what's being created just by looking at the >> shadow dom. >> >> A slight follow-up question for you though...why are you creating a >> custom element at all? Are you trying to hide Polymer implementation >> details? It's very common/straightforward to use the paper-tabs/core-pages >> combo directly (in fact it is a direct example on the Polymer docs: >> https://www.polymer-project.org/docs/elements/paper-elements.html#paper-tabs). >> I'm not sure that I see what you buy by wrapping this into a custom >> element. Why reinvent the wheel? >> >> Anyway, hope that is helpful. Sorry for the long delay in response. I >> only get time to check out the polymer list after the work day is finished >> :) >> --Dennis >> >> >> On Tuesday, January 6, 2015 8:25:05 PM UTC-8, [email protected] wrote: >> >>> Hi all, >>> >>> Sorry for the newbie question but I'm creating my first element. I'm >>> trying to create an element which has a dynamic number of tabs depending on >>> what content is given to the element. The only way I've figured out how to >>> do this is in JS but I have a feeling this isn't the Polymer way, what am I >>> missing? Can you point me to some docs or other elements that will help me >>> get started? >>> >>> here's what I have so far: >>> >>> >>> <code-file-set> >>> <a href="#" tabTitle="onelink">onelink</a> >>> <a href="#" tabTitle="twolink">twolink</a> >>> <a href="#" tabTitle="threelink">threelink</a> >>> </code-file-set> >>> >>> >>> >>> >>> <link rel="import" href="../bower_components/polymer/polymer.html"> >>> <link rel="import" href="/bower_components/core-pages/core-pages.html"> >>> <link rel="import" href="/bower_components/paper-tabs/paper-tabs.html"> >>> >>> >>> >>> <polymer-element name="code-file-set"> >>> <template> >>> >>> <paper-tabs style="max-width:{{tabBarWidth}}px" id="tabs" >>> selected={{selected}}> >>> </paper-tabs> >>> >>> <core-pages selected="{{selected}}"> >>> <content id="codecontent" select="a"></content> >>> </core-pages> >>> </template> >>> >>> <script> >>> >>> Polymer('code-file-set', { >>> domReady: function() { >>> var codeNodes = this.$.codecontent.getDistributedNodes(); >>> >>> for (var i = 0; i < codeNodes.length; i++) { >>> var name = codeNodes[i].getAttribute('tabTitle'); >>> var tab = document.createElement('paper-tab'); >>> tab.innerHTML = name; >>> this.$.tabs.appendChild(tab); >>> } >>> >>> >>> this.selected = 0; >>> this.tabBarWidth = codeNodes.length * 250; >>> }, >>> }); >>> </script> >>> </polymer-element> >>> >>> This works, but it seems ugly. Namely, can creating the tabs not be done >>> in JS but in a more declarative way in the HTML (notice that I create one >>> tab per <a> element found in the content). Similarly for the width of the >>> max width of the paper tabs. >>> >> 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/CAApOkstqnapfejU6Rsuh%3DfcuQmu3SH40MuEX2bmM-cn9MtZU%3DA%40mail.gmail.com > <https://groups.google.com/d/msgid/polymer-dev/CAApOkstqnapfejU6Rsuh%3DfcuQmu3SH40MuEX2bmM-cn9MtZU%3DA%40mail.gmail.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > 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/CADSbU_wQtrvYsVbBbGeVF-6vf1BPGX3UA_AjWfXwSMDe%3Dhigsw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
