google-chrome - paper-input 自动完成无法填写

Question

polymer 1.0Chrome 50.0.2661.102

我正在尝试使用 paper-input 启用 chrome 自动填充。选择输入时，会出现标准的适当 chrome 自动填充提示列表，但是从列表中选择可用名称或电子邮件不会填充输入，它只会关闭 chrome 自动填充列表。

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

Answer 1

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

1. https://bugs.webkit.org/show_bug.cgi?id=172567
2. https://bugs.chromium.org/p/chromium/issues/detail?id=746593
3. https://github.com/PolymerElements/paper-input/issues/554
4. https://github.com/PolymerElements/iron-form/issues/197
5. https://vlukashov.github.io/polymer-forms/#custom-in-shadow

要使其与 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] 找到 x 个具有非唯一 ID #input 的元素 您还可以随机化 ID 以使其独一无二。遵循 paper-input 提供的技术: https://github.com/PolymerElements/paper-input/pull/609/files