Problems with iron-form on chrome

Question

I am trying to use iron-form but I can't access the non-native elements of the form on Chrome.

<dom-module id="e404-view">
    <template>
        <style>
            :host {
                display: block;

                padding: 10px 20px;
            }

        </style>

        <form id="step1Form" is="iron-form">
            <input>
            <paper-input></paper-input>
        </form>

        You hit a 404. <a href="/home">Head back to home</a>
    </template>

    <script>
        Polymer({
            is: 'e404-view',

            ready: function () {
                var form = this.$.step1Form;
//                console.log(form.elements);
                for (var el, i = 0; el = form.elements[i], i < form.elements.length; i++) {
                    console.log(el);
                }
            }
        });
    </script>
</dom-module>

Here is a simple view which contains form. When I iterate through the form.elements on Chrome there is only one input in the array. However this example works perfectly fine on Firefox.

I am building an app and the weird thing is that when I use the same view in different project everything works fine. I think that there are some collisions in the app or something like that. This view is shown through iron-pages in the app. However I am not sure why it works on Firefox.

I can't seems to find out what's wrong and any advises or hints will be appreciated. If I won't solve the bug I'll probably remove the form and handle the validation myself.

Thanks in advance, Jan

Answer 1

I found a solution. The problem was caused by global Polymer settings which were located in the index.html.

Here is the problematic part:

    window.Polymer = {
        dom: 'shadow',
        lazyRegister: true
    };

When I commented out the dom: 'shadow' setting, everything began working.