聚合物hello-world组件未呈现

时间:2015-06-06 16:49:26

标签: polymer web-component

我正在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!”被渲染。 enter image description here

我错过了什么吗?我怎样才能找出问题所在?

以下是我的目录结构。 enter image description here

1 个答案:

答案 0 :(得分:3)

较旧的教程不适用于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文档中找到