To expand a little on what Scott is saying, it's my understanding that the polyfill patches the document.getElementById method so it won't select elements that are supposed to be in the Shadow DOM. It does mean that a document level CSS style for #username would affect all of those username fields (because it's hard to polyfill CSS features) but, at least from the JavaScript side, you should be protected. And if you're using a browser with native Shadow DOM then you're totally protected :)
On Thursday, February 13, 2014 10:07:16 AM UTC-8, Scott Miles wrote: > > 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]<javascript:> > > 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] <javascript:>. >> 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/1a19084e-3710-49a0-9680-152c5d346dbd%40googlegroups.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}