Question

我正在Polymer网站上工作并遇到一些问题。我以前在index.html中有我的主要逻辑，我只是将其中的所有逻辑移动到我创建的名为app.html的Web组件中。当所有内容都在index.html时，该网站运行良好，但当我将其全部放入Web组件并在index.html中创建元素时，该页面现在为空白。没有脚本错误或任何内容。

的index.html：

<!doctype html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="PSK">
  <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <!-- endbuild -->

  <link rel="import" href="elements/app.html">

  <!-- For shared styles, shared-styles.html import in elements.html -->
  <style is="custom-style" include="shared-styles"></style>
</head>

<body fullbleed unresolved>
  <joyce-app></joyce-app>

  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <!-- endbuild-->
</body>

</html>

app.html：

<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="../bower_components/iron-icons/communication-icons.html">
<link rel="import" href="custom-icons.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">

<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">

<!-- Neon elements -->
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">

<link rel="import" href="../bower_components/firebase-element/firebase-auth.html">

<!-- Routing -->
<link rel="import" href="../bower_components/app-router/app-router.html">

<!-- My elements -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="blog.html">
<link rel="import" href="artist.html">
<link rel="import" href="teacher.html">
<link rel="import" href="research.html">
<link rel="import" href="contact.html">
<link rel="import" href="login.html">
<link rel="import" href="simple-overlay.html">

<dom-module id="joyce-app">
  <template>
    <!-- Main Area -->
    <paper-scroll-header-panel main condenses keep-condensed-header>
      <!-- Main Toolbar -->
      <paper-toolbar id="mainToolbar" class="medium-tall">

      <div class="center horizontal layout fit">
          <div class="app-name">My Website</div>
          <span class="flex"></span>
          <paper-icon-button icon="account-circle" onclick="login.open()" hidden?="{{!statusKnown || user}}"></paper-icon-button>
          <paper-icon-button icon="account-square" onclick="{{logout}}" hidden?="{{!statusKnown || !user}}"></paper-icon-button>
          <template if="{{user}}">{{user.password.username}}</template>
        </div>

        <!-- Application sub title -->
        <div class="bottom bottom-container center layout flex fit">
          <div class="bottom-title paper-font-subhead">
            <paper-tabs id="nav" selected="{{selected}}">
                  <paper-tab><a href="#/"><iron-icon icon="home"></iron-icon></a></paper-tab>
                  <paper-tab><a href="#/artist"><iron-icon icon="custom-icons:brush"></iron-icon></a></paper-tab>
                  <paper-tab><a href="#/teacher"><iron-icon icon="custom-icons:apple"></iron-icon></a></paper-tab>
                  <paper-tab><a href="#/research"><iron-icon icon="custom-icons:book"></iron-icon></a></paper-tab>
                  <paper-tab><a href="#/contact"><iron-icon icon="mail"></iron-icon></a></paper-tab>
            </paper-tabs>
          </div>
        </div>
      </paper-toolbar>

      <!-- Main Content -->
      <div class="content">
        <app-router style="display:none;">
          <app-route path="/" import="/elements/blog.html"></app-route>
          <app-route path="/artist" import="/elements/artist.html"></app-route>
          <app-route path="/teacher" import="/elements/teacher.html"></app-route>
          <app-route path="/research" import="/elements/research.html"></app-route>
          <app-route path="/contact" import="/elements/contact.html"></app-route>
          <app-route path="*" import="/elements/blog.html"></app-route>
        </app-router>
        <neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
          <neon-animatable><joyce-blog></joyce-blog></neon-animatable>
          <neon-animatable><joyce-artist></joyce-artist></neon-animatable>
          <neon-animatable><joyce-teacher></joyce-teacher></neon-animatable>
          <neon-animatable><joyce-research></joyce-research></neon-animatable>
          <neon-animatable><joyce-contact></joyce-contact></neon-animatable>
        </neon-animated-pages>
      </div>

      <simple-overlay id="login" with-backdrop>
        <joyce-login></joyce-login>
      </simple-overlay>
    </paper-scroll-header-panel>
  </template>
  <script>
    (function () {
      'use strict';

      Polymer({
        is: 'joyce-app',

        login: function() {
          var params = {};
          params.email = this.email;
          params.password = this.password;
          this.$.firebaseLogin.login(params);
        },
        create: function() {
          this.$.firebaseLogin.createUser(this.email, this.password);
        },
        errorHandler: function(e) {
          this.message = 'Error: ' + e.detail.message;
        }
      });
    })();
  </script>
</dom-module>

我一直在为此苦苦挣扎一个星期，绝对无法弄清楚我做错了什么。我可以引用其他元素而不是joyce-app

Answer 1

<polymer-element>标签不再用于在新版本的Polymer中定义元素。

https://www.polymer-project.org/1.0/docs/migration.html#registration

Answer 2

终于搞清楚了！我的app-theme.html样式看起来只适用于index.html，因此未应用于我的自定义元素。

显然，执行此操作的正确方法是将您的主题放在.css文件中，并将其导入到您要使用该主题的每个自定义元素中。

Answer 3

如果您有引用错误（聚合物未定义），请不要忘记将其添加到index.html

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

聚合物元素未显示

3 个答案: