Polymer 聚合物核心支架元件未显示在核心页面内

我一直在玩聚合物的核心支架元素，我很喜欢它。但是，对于我正在开发的特定应用程序，核心支架不能是整个应用程序的顶层布局元素。我需要始终显示一个主应用程序工具栏和一个不受scaffold布局控制的初始页面。换句话说，scaffold元素是主布局元素，但仅适用于应用程序的一个子页面/子元素。为了实现这一点，我正试图通过核心页面或核心动画页面（为了简单起见，从核心页面开始，然后在我了解其工作原理后迁移到核心动画页面）选择支架控制的聚合物元素。当不在核心页面内时，scaffold元素可以毫不费力地加载。但是，当在核心页面内使用并选中时，会显示主应用程序工具栏，但不会显示scaffold元素（Chrome控制台中没有错误）。换言之，主应用程序工具栏下显示为空。有人能解释一下吗？这可能是某种造型问题吗

以下是高级应用程序元素代码，详细说明了问题的要点（不包括导入）：

芯头面板{
/*高度：在某些浏览器上100%失败*/
高度：100vh；/*100%视口高度*/
}
核心工具栏{
背景色：#5264ae；/*谷歌蓝*/
颜色：#fff；/*白色*/
字体大小：700；/*粗体字体*/
}
应用程序名称
聚合物（“my-app”{
selectedPage:“第一页”，
//已选择页面：“脚手架页面”，
页面选择：函数（）{
this.showPage（）；
},
显示页面：函数（）{
//this.selectedPage=“scaffoldPage”；
此.mainPages.selected=“scaffoldPage”；
}
});

这里是脚手架元素代码，为了完整起见，它也被剥离到了基本部分（也包括sans导入）：

<polymer-element name="my-scaffold-element">
<template>
    <style shim-shadowdom>
        core-toolbar {
            background-color: #5264ae; /* Google Blue ; */
            color: #fff; /* White */
        }

        core-scaffold::shadow core-toolbar {
            background-color: #5264ae; /* Google Blue ; */
            color: #fff; /* White */
        }

        core-scaffold::shadow core-header-panel {
            background: #FFF; /* White */
            color: black;
        }

        /* For use with the shim-shadowdom directive interpreted only when on a non-webcomponent/shadowdom native platform */
        /* (i.e. I noticed the above styling wasn't being applied by FireFox */
        core-scaffold #main core-header-panel {
            background: #FFF;   /* White */
            color: black;
        }

    </style>


    <core-scaffold id="contentscaffold">
        <core-header-panel id="innerHeader" navigation flex>
            <core-toolbar id="innerToolbar">
                <span>Options</span>
            </core-toolbar>
            <core-menu>
                <core-item label="Subpage1" on-tap=" {{ pageTapAction }}"></core-item>
                <core-item label="Subpage2" on-tap="{{ pageTapAction }}"></core-item>
                <core-item label="Subpage3" on-tap="{{ pageTapAction }}"></core-item>
                <core-item label="Subpage4" on-tap="{{ pageTapAction }}"></core-item>
                <core-item label="Subpage5" on-tap="{{ pageTapAction }}"></core-item>                    
            </core-menu>
        </core-header-panel>

        <span id="sectionTitle" tool>Subpage1</span>

        <core-pages id="pages" selected="0">
            <section id="sectionPage1">
                <my-subpage-one-element></my-subpage-one-element>
            </section>
            <section id="sectionPage2">
                <div>Page 2 polymer element here</div>
            </section>
            <section id="sectionPage3">
                <div>Page 3 polymer element here</div>
            </section>
            <section id="sectionPage4">
                <div>Page 4 polymer element here</div>
            </section>
            <section id="sectionPage5">
                <div>Page 5 polymer element here</div>
            </section>                
        </core-pages>

    </core-scaffold>
</template>


<script>
    Polymer('my-scaffold-element', {

        pageTapAction: function(e, detail, sender) {

            for(var key in sender.parentNode.children) {
                if (sender.parentNode.children[key].label == e.target.label) {
                    this.$.pages.selected = key;
                    this.$.sectionTitle.innerText = e.target.label;
                }
            }
        }
    });
</script>

核心工具栏{
背景色：#5264ae；/*谷歌蓝*/
颜色：#fff；/*白色*/
}
核心脚手架：：阴影核心工具栏{
背景色：#5264ae；/*谷歌蓝*/
颜色：#fff；/*白色*/
}
核心脚手架：：阴影核心标题面板{
背景：#FFF；/*白色*/
颜色：黑色；
}
/*用于仅在非webcomponent/shadowdom本机平台上解释的shim shadowdom指令*/
/*（即，我注意到FireFox没有应用上述样式*/
堆芯脚手架#主堆芯头面板{
背景：#FFF；/*白色*/
颜色：黑色；
}
选择权
第1小段
第2页聚合物元素在这里
第3页聚合物元素在这里
第4页聚合物元素在这里
第5页聚合物元素在这里
聚合物（“my-scaffold-element”{
pageTapAction:函数（e、详细信息、发送者）{
for（sender.parentNode.children中的var键）{
if（sender.parentNode.children[key].label==e.target.label）{
此$.pages.selected=键；
此.$.sectionTitle.innerText=e.target.label；
}
}
}
});

还有人在核心页面内使用scaffold元素时遇到问题吗？再一次，只是重复一下，当scaffold元素加载到核心页面外时，它自己可以很好地加载

更新：

为了完整性和显示此场景中涉及的所有CSS样式，以下是导入高级应用程序元素本身的索引页。请注意fullbleed的使用：

<html>
<head>
    <title>Application Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <script src="/components/platform/platform.js"></script>

    <link rel="import" href="/components/my-app-components/my-app.html">

    <style>

        html, body {
            height: 100%;
            margin: 0;
        }

        body {
            font-family: sans-serif;
        }

    </style>
</head>

<body fullbleed unresolved> 

<template is="auto-binding">

    <my-app></my-app>

</template>    

</body>

</html>

申请名称
html，正文{
身高：100%；
保证金：0；
}
身体{
字体系列：无衬线；
}

我认为问题在于

核心页面在您的版本中没有高度

我为您提供了一个示例。我正在使用。然后使用使我的元素覆盖整个页面。然后将
核心页面设置为
高度
为
100%

<body fullbleed>

  <polymer-element name="x-foo" fit>
    <template>
      <style>
        core-pages {
          height: 100%;
        }
      </style>
      <button on-tap="{{prevPage}}">Prev page</button>
      <button on-tap="{{nextPage}}">Next page</button>
      <core-pages id="pages" selected="0">
        <div>Page 1. Not so exciting</div>
        <core-scaffold>
          <core-header-panel navigation flex mode="seamed">
            <core-toolbar>Application</core-toolbar>
            <core-menu theme="core-light-theme">
              <core-item icon="settings" label="item1"></core-item>
              <core-item icon="settings" label="item2"></core-item>
            </core-menu>
          </core-header-panel>
          <div tool>Title</div>
          <div>Content goes here...</div>
        </core-scaffold>
      </core-pages>
    </template>
    <script>
      Polymer({
        prevPage: function() {
          this.$.pages.selected = 0;
        },
        nextPage: function() {
          this.$.pages.selected = 1;
        }
      });
    </script>
  </polymer-element>

  <x-foo></x-foo>

</body>


核心页面{
身高：100%；
}
上一页
下一页
不太令人兴奋
应用
标题
内容在这里。。。
聚合物({
prevPage:函数（）{
此$.pages.selected=0；
},
下一页：函数（）{
此$.pages.selected=1；
}
});

。单击“下一步”按钮可查看
核心支架
页面。
设置核心页面
高度：100%
不起作用，但设置
高度：100vh
产生了效果。但是，发生了一些稍微奇怪的事情。脚手架元素（及其相关的内部标题/toobar/菜单）现在，正如人们所期望的那样，通过核心激活事件显示，但奇怪的是，scaffold元素的内容部分在加载之前被预先显示（即一直显示）
<body fullbleed>

  <polymer-element name="x-foo" fit>
    <template>
      <style>
        core-pages {
          height: 100%;
        }
      </style>
      <button on-tap="{{prevPage}}">Prev page</button>
      <button on-tap="{{nextPage}}">Next page</button>
      <core-pages id="pages" selected="0">
        <div>Page 1. Not so exciting</div>
        <core-scaffold>
          <core-header-panel navigation flex mode="seamed">
            <core-toolbar>Application</core-toolbar>
            <core-menu theme="core-light-theme">
              <core-item icon="settings" label="item1"></core-item>
              <core-item icon="settings" label="item2"></core-item>
            </core-menu>
          </core-header-panel>
          <div tool>Title</div>
          <div>Content goes here...</div>
        </core-scaffold>
      </core-pages>
    </template>
    <script>
      Polymer({
        prevPage: function() {
          this.$.pages.selected = 0;
        },
        nextPage: function() {
          this.$.pages.selected = 1;
        }
      });
    </script>
  </polymer-element>

  <x-foo></x-foo>

</body>