聚合物纸 - 卷轴 - 标题面板不显示

时间：2016-03-26 21:31:30

标签： polymer web-component

我正在写一个聚合物网站，最近我决定，如果我将主要逻辑从index.html移到Web组件中，我的网站架构会更好。出于某种原因，当我使用paper-scroll-header-panel时，在Web组件中，没有任何内容显示。当我注释掉它的导入时，事情又开始显示了。当一切最初都在index.html时，一切都按预期工作。

我不明白为什么它现在不能工作。我有什么想法吗？

新index.html：

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

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

  <title>Joyce K. Lee</title>

  <link rel="stylesheet" href="styles/main.css">
  <link rel="import" href="styles/app-theme.html">
  <link rel="import" href="styles/shared-styles.html">

  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="elements/app.html">

  <style is="custom-style" include="shared-styles"></style>
</head>

<body unresolved>
  <template is="dom-bind">
    <joyce-app></joyce-app>
  </template>

  <script src="scripts/app.js"></script>
</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-icons/iron-icons.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-scroll-header-panel/paper-scroll-header-panel.html"> -->
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.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">

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

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

<link rel="import" href="custom-icons.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>
    <style>

    </style>

    <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>

    <!-- Main Area -->
    <paper-scroll-header-panel fixed>
      <!-- Main Toolbar -->
      <paper-toolbar class="medium-tall">

        <div class="middle">
          <div class="app-name">Joyce K. Lee</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-title">
          <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>
      </paper-toolbar>

      <!-- Main Content -->
      <div class="content">
        <neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-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() {
      Polymer({
        is: 'joyce-app'
      });
    })();
  </script>
</dom-module>

原始index.html：          

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="Joyce K. Lee">
  <title>Joyce K. Lee</title>
  <!-- Place favicon.ico in the `app/` directory -->

  <!-- Chrome for Android theme color -->
  <meta name="theme-color" content="#00bcd4">

  <!-- Web Application Manifest -->
  <link rel="manifest" href="manifest.json">

  <!-- Tile color for Win8 -->
  <meta name="msapplication-TileColor" content="#00bcd4">

  <!-- 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">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
  <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

  <!-- Tile icon for Win8 (144x144) -->
  <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.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 -->

  <!-- will be replaced with elements/elements.vulcanized.html -->
  <link rel="import" href="elements/elements.html">
  <!-- endreplace-->

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

</head>

<body unresolved class="fullbleed layout vertical">
  <span id="browser-sync-binding"></span>
  <template is="dom-bind" id="app">
    <app-router style="display:none;">
      <app-route path="/" import="/elements/joyce-blog.html"></app-route>
      <app-route path="/artist" import="/elements/joyce-artist.html"></app-route>
      <app-route path="/teacher" import="/elements/joyce-teacher.html"></app-route>
      <app-route path="/research" import="/elements/joyce-research.html"></app-route>
      <app-route path="/contact" import="/elements/joyce-contact.html"></app-route>
      <app-route path="*" import="/elements/joyce-blog.html"></app-route>
    </app-router>

    <!-- 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">Joyce K. Lee</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="image:brush"></iron-icon></a></paper-tab>
                  <paper-tab><a href="#/teacher"><iron-icon icon="maps:place"></iron-icon></a></paper-tab>
                  <paper-tab><a href="#/research"><iron-icon icon="work"></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">
        <neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-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>

    <!-- Uncomment next block to enable Service Worker support (1/2) -->
    <paper-toast id="caching-complete" duration="6000" text="Caching complete! This app will work offline."></paper-toast>
  </template>

  <script>
    var scope = document.querySelector('template[is="dom-bind"]');
    scope.selected = 0;
  </script>

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

</html>

1 个答案:

答案 0 :(得分：0)

终于搞清楚了！我的app-theme.html样式看起来只适用于index.html，所以它不适用于我的自定义元素。

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

相关问题
最新问题