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]<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/0406d2b3-d758-4ad5-b555-d7390d0ef4f3%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}