In Polymer elements, 'this' *is* the element at all times. If you want to, you could use this.querySelector, or this.shadowRoot.querySelector for elements in the shadowroot. There is no need for another selector library because DOM has one built in.
On Thu, Feb 13, 2014 at 10:58 AM, David Avenante <[email protected]>wrote: > Yes you're right > > Using Chrome Canary w/ experimental-web-platform-features in console when > I use the jquery selector $('#username') I obtain an empty array. > But with chrome classic and Firefox I obtain a none empty array. So > potentially a risk of side effect. > > The question is more general in fact and raise a real use case. > In real life, when I write for example a jquery plugin or a component with > juste html / js. I avoid the usage of id and use class or specific > attribute (like data-role in jquery mobile) to select element in the > context of my sub dom. > I think in a case of a more complex component who have more usage of DOM > manipulation you need more an helper on the DOM and not on id, maybe a > minimaliste functional DOM selector like zepto or other (just a DOM > selector) > > I like the approach of backbonejs who expose a $el who is the > representation of a jquery selector on the element. > So in polymerjs a this.$ or this.$el to reference the root element > processed with a DOM selector to write some expression like > this.$.find('option:selected') ... > > David > > > > > > > > Le jeudi 13 février 2014 13:07:16 UTC-5, Scott Miles a écrit : >> >> ShadowDOM provides a scope that restores IDs to usefulness. >> >> You don't in fact get this: >> >> <li> >> <gravatar-image username="xxxx" size="80" hash=""> >> <a id="username" href="http://www.gravatar.com/xxxx";> >> <img id="username_image" src="http://www.gravatar.com/ >> avatar/xxxx.jpg?s=80"> >> </a> >> </gravatar-image> >> </li> >> >> You do get this: >> >> <li> >> <gravatar-image username="xxxx" size="80" hash=""> >> #shadow-root >> </gravatar-image> >> </li> >> >> The IDs are inside the shadow root, so there is no duplication at the >> document level. >> >> Do some tests using Chrome Canary w/ experimental-web-platform-features >> enabled if you want to use the DOM inspector to study the features of >> ShadowDOM. >> >> On browsers that need it, the ShadowDOM Polyfill provides the same scoped >> environment to your application, but the DOM inspector shows only the raw >> tree, which is misleading. >> >> Scott >> >> >> >> >> On Thu, Feb 13, 2014 at 7:54 AM, David Avenante <[email protected]>wrote: >> >>> Hi, >>> >>> I look more and more on the WebComponent approach and so on Polymerjs. >>> >>> I'm surprising of the add "Automatic node finding" on the lib. >>> What is the interest of this practice cause in the HTML specification >>> "The ID must be unique in a document" (https://developer.mozilla. >>> org/en-US/docs/Web/API/element.id) >>> >>> I see already the result in this case. >>> >>> https://github.com/djalmaaraujo/gravatar-image/ >>> blob/gh-pages/src/gravatar.html >>> >>> If you look at the template : >>> >>> <a id="username"> >>> <img id="username_image" /> >>> >>> </a> >>> >>> So the creator of the component use a facility of polymer who is a bad >>> practice at the document level. >>> In this case if I have a collection of gravatar images my dom looks like : >>> >>> <ul> >>> >>> >>> <li> >>> <gravatar-image username="xxxx" size="80" hash=""> >>> <a id="username" href="http://www.gravatar.com/xxxx";> >>> >>> >>> <img id="username_image" >>> src="http://www.gravatar.com/avatar/xxxx.jpg?s=80";> >>> </a> >>> >>> >>> </gravatar-image> >>> </li> >>> >>> <li> >>> <gravatar-image username="yyyy" size="80" hash=""> >>> <a id="username" href="http://www.gravatar.com/yyyy";> >>> >>> >>> <img id="username_image" >>> src="http://www.gravatar.com/avatar/yyyy.jpg?s=80";> >>> </a> >>> >>> >>> </gravatar-image> >>> </li> >>> >>> >>> </ul> >>> >>> So many same id on my document. >>> >>> Maybe the Automatic node finding is not a good solution and add an >>> another question in an another thread ;) >>> >>> >>> >>> >>> >>> 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/830e5bce-4d95-4635-a3d7-c713d665b380% >>> 40googlegroups.com. >>> For more options, visit https://groups.google.com/groups/opt_out. >>> >> >> 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/0406d2b3-d758-4ad5-b555-d7390d0ef4f3%40googlegroups.com > . > > For more options, visit https://groups.google.com/groups/opt_out. > 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/CAAUAVAi0yF-YCxJvidhO%2BxSGivSgbDERTQkXT40J7NTqwsHr-A%40mail.gmail.com. For more options, visit https://groups.google.com/groups/opt_out.
![http://www.gravatar.com/avatar/xxxx.jpg?s=80"](http://www.gravatar.com/avatar/xxxx.jpg?s=80"){kind=link}
![http://www.gravatar.com/avatar/yyyy.jpg?s=80"](http://www.gravatar.com/avatar/yyyy.jpg?s=80"){kind=link}