使用模板标签时密码字段中缺少眼睛图标

Question

我明白了，当我使用模板标签时，为什么我在“密码”类型的输入字段中看不到眼睛图标。对于这个例子，我创建了一个简单的单个 HTML 文件：

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <title>Sample</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script>
            document.addEventListener('click', () => {
        /* It's not ok. (Second) */
                const templateNode = document.getElementById('testTemplate');
                const cloneNode = templateNode.content.cloneNode(true);
                document.body.insertBefore(cloneNode, null);

        /* It's ok. (Third) */
                const form = document.createElement('form');
                const input = document.createElement('input');
                input.type = 'password';
                form.appendChild(input);
                document.body.appendChild(form);

            }, { 'once': true });
        </script>
    </head>

    <body>

    <!-- Second //-->
        <template id="testTemplate">
            <form>
                <input type="password">
            </form>
        </template>

    <!-- First //-->
        <form>
            <input type="password">
        </form>

    </body>
</html>

您可以运行在本地或服务器上。我尝试使用 Edge 或 Chrome。是一样的效果。在文档中单击后，将添加两个类型为“密码”的输入字段。第一个输入字段显示眼睛图标。第二个（来自模板）没有眼睛。第三个输入字段（使用 createElement 方法创建）再次引人注目。

我知道如何用 javascript 切换它，但我想了解错误出在哪里。我不认为，这是一个错误。当我拆分文件 (html, javascript).

时，我得到了相同的结果

感谢您的澄清。

Answer 1

您看不到当前 html 元素，因为它用作 html 的容器，此元素不由 html 呈现，但可以由 JavaScript（例如：复制项目），您可以通过使用 url 设置 scr="" 选项来使用“iframe”作为标签（例如 scr="https://whosebug.com"，该页面应该在您的服务器上，它不会从任何其他来源加载）到 html 页面，如果您希望项目出现。

一些文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Answer 2

感谢您的回答。

我坚信这个眼睛图标现在默认显示了。但是 Chrome，Firefox 和 Edge 只有 Edge 显示了这只眼睛....

现在关于Edge 中的问题。模板标签的 link 很有帮助，即使我已经知道了。模板标签的内容只被解析。如果然后将其添加到带有 cloneNode 的 DOM，那么它就会被渲染（据我所知）。

现在的解决方案是什么？在本文的德语版本中，使用 importNode 代替 cloneNode。我来自德国。

我更改了这些行：

const templateNode = document.getElementById('testTemplate');
const cloneNode = document.importNode(templateNode.content, true);
document.body.insertBefore(cloneNode, null);

https://developer.mozilla.org/de/docs/Web/HTML/Element/template

所以Edge在添加后显示了这个眼睛图标。 cloneNode 和 importNode 的具体区别在哪里，我还不知道。那里我得再读一遍。

使用模板标签时密码字段中缺少眼睛图标

Missing eye icon in a password field when using template tag

javascript

passwords

templates

input