纸张输入自动完成无法填写答案

【问题标题】：paper-input autocomplete fails to fill纸张输入自动完成无法填写
【发布时间】：2016-05-25 18:56:26
【问题描述】：

聚合物 1.0 铬 50.0.2661.102

我正在尝试通过纸张输入启用 chrome 自动填充。选择输入时，将出现标准合适的Chrome自动填充提示列表，但是从列表中选择可用的名称或从列表中的电子邮件不会填充输入，但它只关闭Chrome AutoFill列表。

   <paper-input
     id="email"
     name="email"
     label="Email"
     type="email"
     autocomplete="email"
   ></paper-input>
   <paper-input
     id="password"
     name="password"
     label="Password"
     type="password"
     autocomplete="current-password"
   ></paper-input>

【问题讨论】：

这类似于another question。能否提供一个能重现问题的jsbin？

标签： google-chrome polymer polymer-1.0 paper-elements

【解决方案1】：

要使其正常工作，您需要切换到 shady DOM，因为目前（2018 年 8 月 2 日），浏览器不支持 shadowDOM 的自动填充。 Polymer 开发人员已在以下错误跟踪器中请求此支持：

要使其与 shady DOM 一起使用，请将以下代码放在 webcomponents-loader.js 脚本上方：

    <script>
        // Force all polyfills on
        if (window.customElements) window.customElements.forcePolyfill = true;
        ShadyDOM = {
            force: true
        };

        function idToChainedClass(poly, _this) {
            if (ShadyDOM) {
                const allElements = poly.dom(_this.root).querySelectorAll('*');
                let id;
                for (var x = 0, len = allElements.length; x < len; x++) {
                    if (allElements[x].id) {
                        id = allElements[x].id;
                        allElements[x].removeAttribute('id');
                        allElements[x].classList.add(id);
                        _this.$[id] = poly.dom(_this.root).querySelector('.' + id);
                    }
                }
            }
        }
    </script>
    <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>

并在ready() 中使用函数idToChainedClass，无论您在哪里看到这样的错误： [DOM] 找到具有非唯一 ID #input 的 x 个元素您还可以随机化 ID 以使其唯一。遵循纸张输入提供的技术： https://github.com/PolymerElements/paper-input/pull/609/files

【讨论】：

你这个美人。

【解决方案2】：

尝试将您的输入包装在没有属性的表单标签中。像这样：

<form>
  <paper-input
     id="email"
     name="email"
     label="Email"
     type="email"
     autocomplete="email"
   ></paper-input>
   <paper-input
     id="password"
     name="password"
     label="Password"
     type="password"
     autocomplete="current-password"
   ></paper-input>
</form>

【讨论】：

这仅适用于 android，不适用于 iPhone 中的 safari