聚合物元素 css 未显示 - 检查器中没有错误

Question

我正在使用 Polymer 并有一个 index.html 看起来像这样：

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
  <title>Testing polymer</title>

  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">

</head>
<body unresolved fullbleed layout vertical center center-justified style="height: 100vh; margin: 0">
    <template is="auto-binding">
      <paper-tabs selected = "{{selectedPage}}">
        <paper-tab>Page 0</paper-tab>
        <paper-tab>Page 1</paper-tab>
        <paper-tab>Page 2</paper-tab>
        <paper-tab>Page 3</paper-tab>
      </paper-tabs>

    </template>
</body>
</html>

然后我用以下命令启动服务器：

python -m SimpleHTTPServer

并导航到 localhost:8000。加载页面后，没有任何显示。这只是一个空白页。当我检查 JS 控制台看是否有任何错误时，有 none。如果我检查“元素”选项卡，它们都在那里。此外，当我检查每个单独元素的“样式”选项卡时，它完全没有显示任何内容。我只得到标准的橙色、黄色、绿色、蓝色盒子。

我正在使用 Polymer 库中包含的纸标签，并且没有以任何方式操纵它们 CSS。怎么了？我安装不正确吗？任何帮助，将不胜感激。

Answer 1

您应该使用 "dom-bind" 而不是 "auto-binding" 作为模板。

聚合物元素 css 未显示 - 检查器中没有错误

polymer element css not showing - no errors in inspector

javascript

polymer

polymer-1.0