Search code examples
polymerpolymer-1.0shadow-dom

Duplicate ID error coming from shadow-dom

I'm using Polymer 1.0 and recently in dev tools a large number of [DOM] Found 2 elements with non-unique id #someCustomComponent: (More info: shortUrlWithNoUsefulInfo) errors popped up. The duplicate ids are coming from Polymer built components like iron-input which should be in shadow-dom and thus not visible as a duplicate id. Anyone else running into this?

Solution

  • I believe this issue came with the latest Chrome update but I can't say for sure if this is the actual cause. There is already an open issue on Github regarding that problem.

    After looking further into the problem it came to my attention that the duplicate Id's are only a problem with paper-input that have a type of password. In my own case it doesn't matter if I use one of the Polymer components (iron/paper-input) or a standard HTML input with type password.

    What helped me to work around this:

    //script must run before Polymer is imported
window.Polymer = {
    dom: 'shadow'
};

    But there are some other solutions mentioned on Github
    and further explanations to what causes the issue:

    Github paper-input dublicate id's