Проблемы с железной формой на хром

Question

Я пытаюсь использовать железную форму, но не могу получить доступ к неродным элементам формы в 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>

Вот простой вид, который содержит форму. Когда я перебираю form.elements в Chrome, в массиве есть только один вход. Однако этот пример прекрасно работает на Firefox.

Я создаю приложение, и странная вещь в том, что когда я использую одно и то же представление в другом проекте, все работает отлично. Я думаю, что в приложении есть столкновения или что-то в этом роде. Это представление отображается через железные страницы в приложении. Однако я не уверен, почему это работает на Firefox.

Я не могу выяснить, что не так, и любые советы или советы будут оценены. Если я не исправлю ошибку, я, вероятно, удалю форму и обработаю проверку самостоятельно.

Заранее спасибо, Ян

Answer 1

Я нашел решение. Проблема была вызвана глобальными настройками Polymer, которые были расположены в index.html.

Вот проблемная часть:

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

Когда я прокомментировал настройку dom: 'shadow', все начало работать.