聚合物自定義元素不服從父html元素

Question

我正在使用Polymer 1.0-我的頁面包含在paper-scroll-header-panel並且試圖將主工具欄的一部分變成自定義元素（ my-header ）：

<paper-scroll-header-panel condenses keep-condensed-header>

    <!-- Main Toolbar -->
    <paper-toolbar class="tall layout horizontal" id="title-toolbar">
            <my-header id="myHeaderElement"></my-header>
    </paper-toolbar>

my-header自定義元素如下所示：

<dom-module id="my-header">
<style>

</style>
<template>
    <div class="bottom center horizontal layout" id="testing">
        <paper-button>Title</paper-button>
        <div class="flex"></div>
        <paper-button on-click="openLang">lang</paper-button>
    </div>
</template>
<script>
    Polymer({
        is: "my-header",
        behaviors: [
            Polymer.IronFitBehavior,
            Polymer.IronResizableBehavior
        ],
        ready: function() {
            this.fit();
        }
    });
</script>
</dom-module>

問題在於布局屬性bottom center horizontal layout未正確應用，因為它不遵循父<paper-toolbar>元素。 它呈現如下：

但是它應以橙色框底部的文本和左側的Title ，中間的long flex框以及最右側的LANG呈現。 如果我從自定義元素中提取HTML並將其直接粘貼到index.html文件中，則效果很好。

如您所見，我在元素中添加了一些行為，並在ready函數中進行了調用，但無濟於事。

我還嘗試將整個<paper-toolbar>元素拉到自定義元素中，但這只是在<paper-scroll-header-panel>的功能上造成了更多問題。

如何獲得此自定義元素，使其保留在其父元素內並服從格式設置類/屬性？

Answer 1

嘗試在dom元素中將類bottom應用到元素上。

<paper-toolbar class="tall layout horizontal" id="title-toolbar">
        <my-header class="bottom" id="myHeaderElement"></my-header>
</paper-toolbar>