Polymer paper input only in shadow dom，在浏览器中不可见

Question

我是 polymer (2.0) 的新手，所以我只是在练习示例应用程序。我想创建一个带有两个纸质输入字段的基本 'login' 屏幕。

我会告诉你我到目前为止所得到的。

我的index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="import" href="./bower_components/webcomponentsjs/webcomponents-lite.js">
        <link rel="import" href="./bower_components/polymer/polymer.html">
        <link rel="import" href="./testing/login-page.html">
    </head>
    <body unresolved>
        <login-page></login-page>
    </body>
</html>

还有我的登录名-page.html，位于名为 'testing'

的文件夹中

<dom-module id="login-page">
    <template>
        <h2>Hello!</h2>
        <paper-input label="test">test</paper-input>
    </template>
    <script>
        Polymer({
            is: 'login-page',
            properties: {
                prop1: {
                    type: String,
                    value: 'login-page',
                },
            }
        });
    </script>
</dom-module>

我已经通过以下命令使用 Bower 安装了纸张输入：bower install paper-input

问题是，它没有出现，但当我检查页面时它出现在阴影中 dom。 h2 标签中的所有内容都显示出来了。同样，我是聚合物的新手，所以我做错了什么吗？

Answer 1

如果您使用的是 Polymer 2.0，则需要下载带有 #2.0-preview 后缀的元素。

你的情况

bower i --save PolymerElements/paper-input#2.0-preview

然后将其导入您的页面

<link rel="import" href="/bower_components/paper-input/paper-input.html">

Polymer paper input only in shadow dom，在浏览器中不可见

Polymer paper input only in shadow dom, not visible in browser

polymer