polymer - ポリマーコア足場要素がコアページ内に表示されない

Question

私はポリマーのコア足場要素で遊んでいて、とても気に入っています。ただし、私が開発している特定のアプリでは、core-scaffold をアプリ全体の最上位のレイアウト要素にすることはできません。メイン アプリケーション ツールバーを常に表示する必要があり、最初のページは scaffold レイアウトによって制御されません。つまり、scaffold-element はメインのレイアウト要素ですが、アプリケーションのサブページ/サブ要素の 1 つだけです。これを達成するために、コアページまたはコアアニメーションページを介して足場制御のポリマー要素を選択できるようにしようとしています (簡単にするためにコアページから始めて、一度コアアニメーションページに移行します)。それがどのように機能するかを理解してください）。コアページ内にない場合、足場要素は問題なく読み込まれます。でも、コア ページ内で使用して選択すると、メイン アプリケーション ツールバーは表示されますが、足場要素は表示されません (Chrome コンソールでエラーは発生しません)。つまり、アプリのメイン ツールバーの下に空のディスプレイが表示されます。誰でもこれに光を当てることができますか？おそらくある種のスタイリングの問題ですか？

以下は、問題を示すために要点だけを取り除いた高レベルのアプリ要素コードです (インポートは含まれていません)。

<polymer-element name="my-app">

<template>

    <style>

        core-header-panel {
            /* height: 100% fails here on some browsers */
            height: 100vh;  /* 100% of the viewport height */
        }

        core-toolbar {
            background-color: #5264ae; /* Google Blue ; */
            color: #fff; /* White */
            font-weight: 700; /* Boldish font */
        }

    </style>

    <!-- HIGH LEVEL APP LAYOUT ELEMENT -->
    <core-header-panel id="appHeader" mode="standard">

        <!-- OUTER APP TOOLBAR ELEMENT -->
        <core-toolbar id="appToolbar">
            <paper-icon-button id="navicon" icon="arrow-back"></paper-icon-button>
            <span flex>App Name</span>
            <paper-icon-button id="searchbutton" icon="search"></paper-icon-button>
        </core-toolbar>

        <!-- MAIN CONTENT ELEMENTS -->
        <core-pages id="mainPages" selected="{{selectedPage}}">

            <my-default-page-element name="firstPage" on-core-activate="{{pageSelect}}"></my-default-page-element>

            <my-scaffold-element name="scaffoldPage"></my-scaffold-element>

        </core-pages>

    </core-header-panel>

</template>

<script>
    Polymer('my-app', {

        selectedPage: 'firstPage',
        //selectedPage: 'scaffoldPage',

        pageSelect: function () {
            this.showPage();
        },

        showPage: function () {
            //this.selectedPage = "scaffoldPage";
            this.$.mainPages.selected = "scaffoldPage";
        }

    });
</script>

そして、完全を期すために、scaffold-element のコードをその本質的な部分 (インポートも除く) まで取り除いたものを以下に示します。

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

コアページ内で足場要素を使用する際に問題に遭遇した人はいますか? 繰り返しになりますが、scaffold 要素は、コア ページの外側に読み込まれると、それ自体で完全に正常に読み込まれます。

更新しました：

完全を期し、このシナリオに関連するすべての CSS スタイルを表示するために、高レベルのアプリ要素自体をインポートするインデックス ページを次に示します。フルブリードの使用に注意してください。

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