Error "Found 3 elements with non-unique id #input"

Question

I'm using Polymer with Chrome 63.0.3239.108 (updated this morning) and I got some new errors while launching my webapp:

[DOM] Found 3 elements with non-unique id #input

Here's my code :

<div class="card-content" on-keypress="_keyHandler">
   <paper-input id="login" label="[[i18n('uid')]]"></paper-input>
   <paper-input id="pwd" label="[[i18n('pwd')]]" type="password"></paper-input>
   <paper-input id="server" label="[[i18n('server')]]"></paper-input>
</div>

Yeah, <paper-input> elements have the same id, but what can I do to remove this console error?

Thanks a lot

Accordingly

Aaaaand this is why I don't take Polymer seriously. See also: github.com/PolymerElements/paper-input/issues/600 – Bewley

Best you can do is ignore it, since it doesn't actually prevent your form from working. – Bewley

@Bewley thanks for the information about the bug. there is no problem except console error, but it's a little bit annoying when you try to work ;) – Accordingly

For Polymer 1.0+ you may add window.Polymer = { dom: 'shadow' }, I assume you use that since in Polymer 2+ shadow is the default (#41072266). However be prepared for changes in your components' look and functionality if that's what you do. – Hannibal

@IgorR yup, that's what i've done... but well it seems that "hidden" property is not very well functionnning, .... and a lot of stuff. – Accordingly

That's the easy part :) [hidden] { display: none !important; } helps that. But too many other changes are really not on time unless you want/can invest a couple of days into upgrading to Polymer 2. I'm fighting exactly the same battle right now, and just took the decision to live with it for another while. – Hannibal

@IgorR add it this morning, remove a lot of UI problem, seems that jquery's $("#") don't work anymore too ... Do you think that "multiple non-unique id" error can have some edge effect now or in the future, or is it just messy in console? – Accordingly

jquery's $ is not webcomponents aware AFAIK, so with shady dom it will work as if it was just dom. With shadow dom it wouldn't be able to see nodes that are in shadow dom relative to the root you're quering. Anyway you should respect encapsulation and not abuse the shadow dom quering across components' borders uncontrollably just because complete isolation is impossible in shady dom. So expect "edge cases" to pop up sometime in the future in every case where you disrespected encapsulation. – Hannibal

@IgorR "So expect "edge cases" to pop up sometime in the future in every case where you disrespected encapsulation" But only if I add window.Polymer = { dom: 'shadow' } and disrespect encapsulation. But do you think that keeping window.Polymer = { dom: 'shady' } is a bad idea or will have edge effect? – Accordingly

it's ok for a while until Polymer 1 becomes completely obsolete. after that it will be ok if the application doesn't need much maintenance. however if you want to catch up with newer stuff you'll eventually switch to shadow and fix all the glitches you see today with dom:'shadow'. It makes sense to combine these changes with moving to Polymer 2 (or 3 sometime near mid-2018, just guessing the time). – Hannibal

@IgorR thanks a lot for your help (tbh we think we will change polymer for something else) – Accordingly

it takes a mind twist to approach and some will to resist the mainstream. I've invested quite a few months into building a polymer+redux -based (no other frameworks) infrastructure and am quite pleased to have the a whole application with tens of views in < 500kb -min-gzipped which can act as both SPA and classic website with sporadic embedded components. while there are bumps on this road all webdev will be employing webcomponents someday, at least those that do not fear the shadow dom – Hannibal

@IgorR we don't fear shadow dom, but we fear polymer. It was a good choice 2 years ago when development starts, but now we have much more problems than solutions, and there is still large bugs opened for polymer team, and it's like if they totally don't care about polymer 1.x – Accordingly

Polymer is trying to be thin and was initially built on a future standard that changed quite a lot (dispite googe's pressure to promote their proposals). Unless they want to be win95 carrying over all the legacy there's no way to keep the experimental first stage forever. But all frameworks do this (see angular's twists) and Polymer 1->2 changes are relatively small. Again, if you didn't observe components isolation punching them with jquery for 2 years it might be too late to start now, but then is it easier to rewrite the whole codebase? Anyway this better fits a chat discussion. Good luck! – Hannibal

@IgorR thanks a lot for your help and explanation. – Accordingly

Answer 1

I had same issue when i was using angular 5. I put "name" attribute into my tags and it fixed.

Like:

<input type="text" [(ngModel)]="user.userName"  name="loginUserName" >

Saragossa

Well in fact it's not possible, it's inside a Polymer element. It's because i have 3 paper-input element in the same page. Using shadow dom resolved the problem – Accordingly

Answer 2

I had similar problems. Few days agonotwaldorf, the Polymer staff paper-input developer, closed a connected issue, releasing paper-input 1.2.0 on GitHub So update your bower.json with

    "paper-input": "1.2.0",

or even better

    "paper-input": "~1.2.0",

(that follows up possible patch releases)

Hoping have been useful ;-)

Dribble