Question

之前我曾多次遇到过这种情况，但仍然无法修复它。当我导入从凉亭下载的核心/纸质元素时，导入将阻止我的页面加载，所以我最终会得到一个空白屏幕。我已设法通过将url导入元素而不是bower来解决该问题。我能够创建一个由许多输入文本组成的简单聚合物元素，但今天当我创建一个简单的数据绑定元素时，我的页面将无法加载。

的index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
    <link rel="import" href="hello-name.html">
    <script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script> 
</head>
<body>
    <p><hello-name></hello-name><p>
</body>
</html>

您好-name.html

<polymer-element name="hello-name">
    <template>
        <h1>Hello {{name}}</h1>
        <input type="text" value="{{name}}> 
    </template>
    <script>
        Polymer('hello-name', {
            ready: function() {
                this.name = "World";
            }
        })
    </script>
</polymer-element>

Answer 1

我可以看到的一个潜在问题是你想把webcomponents.js放在你的导入之上。

空白屏幕的另一个常见原因是当您有一些带有html声明但没有相应脚本的元素时，会产生Polymer等待其脚本加载和执行的情况。您可以通过在浏览器控制台中运行Polymer.waitingFor()来查看Polymer等待的元素。

Answer 2

您需要在主html页面中使用Polymer.html将其包含在自定义元素中。

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="hello-name">
    <template>
        <h1>Hello {{name}}</h1>
        <input type="text" value="{{name}}> 
    </template>
    <script>
        Polymer('hello-name', {
            ready: function() {
                this.name = "World";
            }
        })
    </script>
</polymer-element>

Answer 3

我已经导入了几个月前创建的自定义元素，似乎没有问题。我刚刚创建了另一个带绑定的简单元素，它似乎也破坏了页面！我已经尝试将polymer.html放在自定义元素的顶部，并将webcomponent.js移动到导入的顶部，它似乎不起作用。

Answer 4

目录结构很重要。假设你有;

/bower_components/polymer/polymer.html

在bower_components中创建一个目录，并将你的组件放在这个目录中，即

/bower_components/hello/hello.html

在hello.html内部加载polymer.html

<link rel="import" href="../polymer/polymer.html">

href用于标识之前是否加载了元素。如果你不使用../polymer/polymer.html浏览器尝试加载它两次，你会得到一个空白页。

Answer 5

如果您使用聚合物1.0，请查看本指南：

https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html

显然你必须使用js来代替并明确地注册模块。

聚合物导入不渲染

5 个答案: