带有聚合物的空白页

Question

我正在关注 this YouTube video 并且我已经看过教程系列中之前的所有视频。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="elements/hello-world.html">
    </head>
    <body>
        <hello-world></hello-world>
    </body>
</html>

第二页：

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name='hello-world' noscript>
    <template>
        <h1>Hello World</h1>
    </template>
</polymer-element>

但是我的页面还是空白，我做错了什么？

我用 Wamp。

Answer 1

如果我没有正确导入元素或库，我总是会遇到这种情况。因此，请确保所有路径位置都正确。

确保使用 0.5 版本，因为在 0.8 中自定义元素声明使用 <dom-module id="element-name"></dom-module>

Answer 2

首先检查您的聚合物版本。它位于 dependencies 下的 bower.json 上检查 "polymer": "Polymer/polymer#^1.7.0"，你可以看到我的是 1.7.0。如果您使用的是 polymer 1.0 及更高版本。自定义元素声明已更改。这是关于您必须执行的操作的详细说明。

将<script src="bower_components/webcomponentsjs/webcomponents.js"></script>更改为<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
自定义元素声明也已更改自
<polymer-element name="hello-world"> <template> <div>Hello World</div> </template> <script> Polymer(); </script> </polymer-element> 至

<dom-module id="hello-world"> <template> <div>Hello World</div> </template> <script> Polymer({ is: "hello-world" }); </script> </dom-module>

查看迁移指南页面https://www.polymer-project.org/1.0/docs/migration

带有聚合物的空白页

Blank page with Polymer

html

wamp

polymer