javascript - polymer 自定义元素不服从父 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左边，中间的长弹性框，和 LANG在最右边。如果我从自定义元素中提取 HTML 并将其直接粘贴到 index.html 文件中，它就可以正常工作。

如您所见，我向元素添加了一些行为，并在 ready 中调用它们。功能但无济于事..

我也尝试过拉动整个 <paper-toolbar>元素到自定义元素中，但这只会造成更多问题 <paper-scroll-header-panel>的功能。

如何让这个自定义元素保留在其父元素内并遵守格式类/属性？

Answer 1

尝试在 light dom 中的元素上应用 bottom 类。

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