Ошибка Найдено 3 элемента с неуникальным идентификатором #input

Я использую Polymer с Chrome 63.0.3239.108 (обновлено сегодня утром), и при запуске моего веб-приложения я получил несколько новых ошибок:

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

Вот мой код:

<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>

Да, элементы <paper-input> имеют одинаковый идентификатор, но что я могу сделать, чтобы убрать эту ошибку консоли?

Большое спасибо


google-chrome html unique-id polymer-1.0
person user3197506    schedule 18.12.2017    source источник
comment
Аааа, вот почему я не воспринимаю Polymer всерьез. См. также: github.com/PolymerElements/paper-input/issues/600   -  person BoltClock    schedule 18.12.2017
comment
Лучшее, что вы можете сделать, это проигнорировать его, поскольку на самом деле это не мешает вашей форме работать.   -  person BoltClock    schedule 18.12.2017
comment
@BoltClock спасибо за информацию об ошибке. нет никаких проблем, кроме ошибки консоли, но это немного раздражает, когда вы пытаетесь работать;)   -  person user3197506    schedule 18.12.2017
comment
Для Polymer 1.0+ вы можете добавить window.Polymer = {dom: 'shadow'}, я предполагаю, что вы используете его, поскольку в Polymer 2+ тень используется по умолчанию (stackoverflow.com/questions/41071766/). Однако будьте готовы к изменениям внешнего вида и функциональности ваших компонентов, если вы это делаете.   -  person Igor R    schedule 18.12.2017
comment
@IgorR да, это то, что я сделал ... но похоже, что скрытое свойство не очень хорошо работает, .... и многое другое.   -  person user3197506    schedule 18.12.2017
comment
Это самая простая часть :) [скрытый] { display: none !important; } помогает в этом. Но слишком много других изменений действительно несвоевременны, если вы не хотите/не можете потратить пару дней на обновление до Polymer 2. Я сейчас веду точно такую ​​же битву и просто принял решение пожить с ней еще какое-то время.   -  person Igor R    schedule 18.12.2017
comment
@IgorR добавил это сегодня утром, устранил много проблем с пользовательским интерфейсом, кажется, что jquery $(#) тоже больше не работает ... Как вы думаете, множественная ошибка с неуникальным идентификатором может иметь какой-то пограничный эффект сейчас или в будущем , или это просто беспорядок в консоли?   -  person user3197506    schedule 18.12.2017
comment
jquery $ не знает о веб-компонентах AFAIK, поэтому с shady dom он будет работать так, как если бы это был просто dom. С теневым домом он не сможет видеть узлы, которые находятся в теневом доме относительно корня, который вы запрашиваете. В любом случае вы должны уважать инкапсуляцию и не злоупотреблять теневым домом, бесконтрольно опрашивая границы компонентов только потому, что полная изоляция в теневом доме невозможна. Поэтому ожидайте появления пограничных случаев в будущем в каждом случае, когда вы пренебрегали инкапсуляцией.   -  person Igor R    schedule 18.12.2017
comment
@IgorR Так что ожидайте появления крайних случаев в будущем в каждом случае, когда вы не уважаете инкапсуляцию. Но только если я добавлю window.Polymer = {dom: 'shadow'} и не уважаю инкапсуляцию. Но вы думаете, что сохранение window.Polymer = { dom: 'shady' } - плохая идея или будет иметь краевой эффект?   -  person user3197506    schedule 18.12.2017
comment
какое-то время все в порядке, пока Polymer 1 полностью не устареет. после этого все будет в порядке, если приложение не требует особого обслуживания. однако, если вы хотите узнать о новых вещах, вы в конечном итоге переключитесь на тень и исправите все глюки, которые вы видите сегодня, с помощью dom: 'shadow'. Имеет смысл совместить эти изменения с переходом на Polymer 2 (или 3 где-то ближе к середине 2018 года, просто угадывая время).   -  person Igor R    schedule 18.12.2017
comment
@IgorR большое спасибо за помощь (думаем поменяем полимер на что-то другое)   -  person user3197506    schedule 18.12.2017
comment
чтобы приблизиться, требуется извращение ума и некоторая воля, чтобы сопротивляться мейнстриму. Я потратил довольно много месяцев на создание инфраструктуры на основе полимера + редукса (никаких других фреймворков) и очень доволен тем, что у меня есть целое приложение с десятками просмотров в ‹ 500kb -min-gzipped, которое может действовать как SPA и классический веб-сайт со спорадическими встроенными компонентами. хотя на этом пути есть неровности, все веб-разработчики когда-нибудь будут использовать веб-компоненты, по крайней мере, те, которые не боятся теневого дома.   -  person Igor R    schedule 18.12.2017
comment
@IgorR мы не боимся теневого дома, но мы боимся полимера. Это был хороший выбор 2 года назад, когда начиналась разработка, но сейчас у нас гораздо больше проблем, чем решений, и для полимерной команды все еще открыты большие ошибки, и это похоже на то, что им совершенно наплевать на полимер 1.x.   -  person user3197506    schedule 18.12.2017
comment
Polymer пытается быть тонким и изначально был построен на будущем стандарте, который довольно сильно изменился (несмотря на давление Google по продвижению своих предложений). Если они не хотят, чтобы Win95 несла все наследие, нет никакого способа сохранить экспериментальный первый этап навсегда. Но все фреймворки делают это (см. повороты angular), и изменения Polymer 1-›2 относительно невелики. Опять же, если вы не наблюдали изоляцию компонентов, пробивающую их с помощью jquery в течение 2 лет, возможно, было бы слишком поздно начинать сейчас, но тогда не проще ли переписать всю кодовую базу? В любом случае, это лучше подходит для обсуждения в чате. Удачи!   -  person Igor R    schedule 18.12.2017
comment
@IgorR большое спасибо за вашу помощь и объяснение.   -  person user3197506    schedule 18.12.2017

Ответы (2)


arrow_upward
4
arrow_downward

У меня была такая же проблема, когда я использовал angular 5. Я поместил атрибут «имя» в свои теги, и он исправлен.

Нравиться:

<input type="text" [(ngModel)]="user.userName"  name="loginUserName" >
person Wahap    schedule 27.12.2017
comment
На самом деле это невозможно, это внутри полимерного элемента. Это потому, что у меня есть 3 элемента ввода бумаги на одной странице. Использование теневого дома решило проблему - person user3197506; 29.12.2017

arrow_upward
0
arrow_downward

У меня были похожие проблемы. Несколько дней назаднотвальдорф, сотрудники Polymer -разработчик ввода, закрыл связанную проблему, выпустив paper-input 1.2.0 на GitHub. Обновите файл bower.json с помощью

    "paper-input": "1.2.0",

или даже лучше

    "paper-input": "~1.2.0",

(что следует за возможными выпусками исправлений)

Надеюсь, был полезен ;-)

person gitact    schedule 30.01.2018