Polymer hello-world 组件不渲染

Question

我正在 https://www.youtube.com/watch?v=wId1gMzriRE

学习 Polymer 教程

我使用的是 Polymer 1.0（教程是旧版本）。我已将 platform.js 更改为 webcomponents.js。

现在我的index.html是

<!doctype html>
<html>
  <head>
    <title>Polymer Trial</title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="elements/hello-world.html">
  </head>
    <body>
        <h2>Test</h2>
        <hello-world></hello-world>
    </body>
</html>

我的元素文件 hello-world.html 为

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

但是我在浏览器中得到的结果如下；没有 "Hello World!" 被渲染。

我错过了什么吗？我怎样才能找出问题出在哪里？

下面附上我的目录结构。

Answer 1

较旧的教程不适用于 Polymer 1.0，因为有许多重大变化。在新版本中，Hello World 看起来像：

<dom-module id="hello-world">
  <template>
    <h1>Hello world!</h1>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'hello-world'
  });
</script>

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

的 Polymer 文档中找到更多信息

Polymer hello-world 组件不渲染

Polymer hello-world component not rendering

web-component

polymer